always_confused
Reputation: 39
HTML Nested Table won't re-size to cell height
This should be really simple, but for some reason I can't seem to get it to work!!
The table below is generated at runtime via Javascript (Python / Flask back end) and that all works fine, so I've just taken a couple of rows of the HTML generated to highlight the exact problem.
Having tweaked the formatting, I'm nearly where I want to be, but there are 2 issues that I can't seem to resolve:
Some cells don't resize to fit when the cell height is greater than the text (e.g. the table that goes from bet_id -> status and also back_price_size and lay_price_size).
The CSS 'chess board' pattern works most of the time, but oddly some rows in the table from bet_id -> status don't take the formatting, others do (this is a separate point, so I'm only mentioning in case its a quick fix, I can re-post as a separate question if this isn't appropriate).
I presume 1) at least is very simple, but whenever I include a style='height=100px;' or variation of it doesn't do what I assume it does.
The desired behaviour for the fields mentioned above, is that if the cell is higher (i.e. because another cell has more text, word-break is set to break-word) then these cells re-size to fit, otherwise the colours and borders look weird!
Here is my code:
<html>
<body>
<style>
:root {
--border_colour: #e6b800;
--back_colour_1: #0d0d26;
--text_colour_1: #ff9900;
--back_colour_2: #1a1a1a;
--text_colour_2: #ffbf00;
}
body {
margin:0px;
padding:0px;
font-size:12px;
overflow-x: hidden;
}
.divTable {
table-layout: fixed;
display: table;
background-color: #EEEEEE;
text-align: center;
width: 100%;
border: 1px solid var(--border_colour);
border-collapse: collapse;
padding 3px;
margin 3px;
border-style: hidden;
height=100%;
}
.divTableHeading
{
display: table-header-group;
border: 1px solid var(--border_colour);
border-collapse: collapse;
}
.divTableBody
{
display: table-row-group;
border: 1px solid var(--border_colour);
border-collapse: collapse;
}
.divTableRow
{
display: table-row;
border: 1px solid var(--border_colour);
border-collapse: collapse;
}
.divTableHead {
display: table-cell;
border: 1px solid var(--border_colour);
border-collapse: collapse;
}
.divTableCell {
display: table-cell;
border: 1px solid var(--border_colour);
border-collapse: collapse;
}
.divTableHead:nth-child(odd) {
background-color: var(--back_colour_2);
color: var(--text_colour_2);
}
.divTableHead:nth-child(even) {
background-color: var(--back_colour_1);
color: var(--text_colour_1);
}
.divTableRow:nth-child(odd) .divTableCell:nth-child(odd), .divTableRow:nth-child(even), .divTableCell:nth-child(even) {
background-color: var(--back_colour_1);
color: var(--text_colour_1);
word-break:break-all;
}
.divTableRow:nth-child(odd) .divTableCell:nth-child(even), .divTableRow:nth-child(even) .divTableCell:nth-child(odd) {
background-color: var(--back_colour_2);
color: var(--text_colour_2);
word-break:break-all;
}
</style>
<div id="market">
<div class="divTable">
<div class="divTableBody">
</div>
<div class="divTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead" style="width: 500px;">
<div>
<div class="divTable" style="height=100% !important">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead">
<div>id</div>
</div>
<div class="divTableHead">
<div>status</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="divTableHead" style="width: 7%;">
<div>price_size</div>
</div>
</div>
</div>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell" style="height: 100% !important;">
<div style="height: 100% !important;">
<div class="divTable" style="height: 100% !important;">
<div class="divTableBody" style="height: 100% !important;">
<div class="divTableRow" style="height: 100% !important;">
<div class="divTableCell">
<div>123</div>
</div>
<div class="divTableCell">
<div>EXECUTABLE</div>
</div>
</div>
<div class="divTableRow">
<div class="divTableCell">
<div>567</div>
</div>
<div class="divTableCell">
<div>EXECUTION_COMPLETE</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="divTableCell">
<div>
<div class="divTable">
<div class="divTableBody" style="height=100%;">
<div class="divTableRow">
<div class="divTableCell"
style="background-color: #389cc7; color: white; font-size:1em; border-style: hidden;">
14.5
</div>
</div>
<div class="divTableRow" >
<div class="divTableCell"
style="background-color: #389cc7; color: white; font-size:0.75em; border-style: hidden;">
4
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="divTableRow">
<div class="divTableCell">
<div style="height: 100% !important;">
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">
<div>19440</div>
</div>
<div class="divTableCell">
<div>EXECUTION_COMPLETE</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="divTableCell">
<div>
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"
style="background-color: #389cc7; color: white; font-size:1em; border-style: hidden;">
10.5
</div>
</div>
<div class="divTableRow">
<div class="divTableCell"
style="background-color: #389cc7; color: white; font-size:0.75em; border-style: hidden;">
3.94
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body></html>
<html>
<body>
<style>
:root {
--border_colour: #e6b800;
--back_colour_1: #0d0d26;
--text_colour_1: #ff9900;
--back_colour_2: #1a1a1a;
--text_colour_2: #ffbf00;
}
body {
margin:0px;
padding:0px;
font-size:12px;
overflow-x: hidden;
}
.divTable {
table-layout: fixed;
display: table;
background-color: #EEEEEE;
text-align: center;
width: 100%;
border: 1px solid var(--border_colour);
border-collapse: collapse;
padding 3px;
margin 3px;
border-style: hidden;
height=100%;
}
.divTableHeading
{
display: table-header-group;
border: 1px solid var(--border_colour);
border-collapse: collapse;
}
.divTableBody
{
display: table-row-group;
border: 1px solid var(--border_colour);
border-collapse: collapse;
}
.divTableRow
{
display: table-row;
border: 1px solid var(--border_colour);
border-collapse: collapse;
}
.divTableHead {
display: table-cell;
border: 1px solid var(--border_colour);
border-collapse: collapse;
}
.divTableCell {
display: table-cell;
border: 1px solid var(--border_colour);
border-collapse: collapse;
}
.divTableHead:nth-child(odd) {
background-color: var(--back_colour_2);
color: var(--text_colour_2);
}
.divTableHead:nth-child(even) {
background-color: var(--back_colour_1);
color: var(--text_colour_1);
}
.divTableRow:nth-child(odd) .divTableCell:nth-child(odd), .divTableRow:nth-child(even), .divTableCell:nth-child(even) {
background-color: var(--back_colour_1);
color: var(--text_colour_1);
word-break:break-all;
}
.divTableRow:nth-child(odd) .divTableCell:nth-child(even), .divTableRow:nth-child(even) .divTableCell:nth-child(odd) {
background-color: var(--back_colour_2);
color: var(--text_colour_2);
word-break:break-all;
}
</style>
<div id="market">
<div class="divTable">
<div class="divTableBody">
</div>
<div class="divTable">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead" style="width: 500px;">
<div>
<div class="divTable" style="height=100% !important">
<div class="divTableHeading">
<div class="divTableRow">
<div class="divTableHead">
<div>id</div>
</div>
<div class="divTableHead">
<div>status</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="divTableHead" style="width: 7%;">
<div>price_size</div>
</div>
</div>
</div>
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell" style="height: 100% !important;">
<div style="height: 100% !important;">
<div class="divTable" style="height: 100% !important;">
<div class="divTableBody" style="height: 100% !important;">
<div class="divTableRow" style="height: 100% !important;">
<div class="divTableCell">
<div>123</div>
</div>
<div class="divTableCell">
<div>EXECUTABLE</div>
</div>
</div>
<div class="divTableRow">
<div class="divTableCell">
<div>567</div>
</div>
<div class="divTableCell">
<div>EXECUTION_COMPLETE</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="divTableCell">
<div>
<div class="divTable">
<div class="divTableBody" style="height=100%;">
<div class="divTableRow">
<div class="divTableCell"
style="background-color: #389cc7; color: white; font-size:1em; border-style: hidden;">
14.5
</div>
</div>
<div class="divTableRow" >
<div class="divTableCell"
style="background-color: #389cc7; color: white; font-size:0.75em; border-style: hidden;">
4
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="divTableRow">
<div class="divTableCell">
<div style="height: 100% !important;">
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">
<div>19440</div>
</div>
<div class="divTableCell">
<div>EXECUTION_COMPLETE</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="divTableCell">
<div>
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell"
style="background-color: #389cc7; color: white; font-size:1em; border-style: hidden;">
10.5
</div>
</div>
<div class="divTableRow">
<div class="divTableCell"
style="background-color: #389cc7; color: white; font-size:0.75em; border-style: hidden;">
3.94
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body></html>Upvotes: 0
Views: 157
Answers (2)
Mayur Siddhapura
Reputation: 296
Are you looking for the solution as follows?
If not then you can let me know. so, will check again and come up with other solution.
If yes, then you can achieve by doing following things:
- First you need to search from the html or wherever you are setting your height attribute. Because in some cases its like
height=100%
which will not work. So, you can search in above your given html text you will find it at three places. First you can correct as follows:
height:100%
- As per your given html there is extra div generating for the price_size column child table. Which is the main cause for preventing to make height of the child table to 100%. By removing that anonymous div, you will get the 100% height of the child table. You can check in following image the extra div in between
<div class="divTableCell">and<div class="divTable">:
Upvotes: 1
Djave
Reputation: 9329
Consider massively simplifying your html structure and using a regular html table element that has all the functionality you need, but without any of the butchering required.
It is also semantic and is literally built for what you are doing.
I'm sorry if you have to use the div style markup you have provided. I'm happy to remove this answer if it doesn't answer your question.
table{
background: black;
border-collapse: collapse;
width: 100%;
}
td, th{
border: 1px solid yellow;
color: yellow;
text-align: center;
}
.highlight{
background: #389cc7;
color: #fff;
}<table>
<thead>
<tr>
<th>
id
</th>
<th>
status
</th>
<th>price_size</th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
<td>EXECUTABLE</td>
<td class="highlight">
14.5<br/>
4
</td>
</tr>
</tbody>
</table>Upvotes: 0
Related Questions
- height of table row not changing
- Setting the height of a table in HTML has no effect
- Nested Bootstrap tables not filling parent cell height
- How to make a nested table the same height as its parent
- nested table not taking 100% height of parent td
- CSS Table won't change height
- HTML table setting td height wont work
- Table Cell Not Growing to its Contents Size
- How (where) can i set fixed cell size in nested html tables, with css?
- Table data <td> height not changed