I'm hoping there is a way to shrink the height of a td so that the height is exactly what I want, example 6px when it is holding 11px text. I'm envisioning being able to see the top half of the cell content.
The reason I don't want to just set the div height is I want each row to be the same height, and there are cells spanning rows so the div would be cutting off content to one cell when it should be able to expand to the two cells. I hope that makes some sense...
<table>
<thead>
<tr>
<th style="height: 0px; width: 0px;">
</th>
<th style="width: 25px;">
</th>
<th style="width: 25px;">
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="height: 6px;">
</td>
<td>
<div>
Some table data</div>
</td>
<td rowspan="2">
<div>
Some data that is two rows high</div>
</td>
</tr>
<tr>
<td style="height: 6px;">
</td>
<td>
<div>
Some more data</div>
</td>
</tr>
</tbody>
</table>
You can't restrict the table cells' height but you can enforce height on the immediate <div>s:
td > div {
overflow: hidden;
height: 6px;
}
Related
I have a table where I have successfully set up the body to scroll, and leave the header alone, but this now appears to be causing problems with column widths:
One has to specify the widths of columns in the tbody to be the same as the ones in the thead, else the browser decides to do things how it thinks it should be done, ie: wrong.
however, the browser (and this is consistent across the three recognised mainstream browsers - ie, firefox and chrome) still seems to want to vary the size of my columns.
here is a code sample:
CSS:
<style>
#divPersonalTables tbody:nth-child(2) {max-height: 350px; overflow-y: scroll; overflow-x: hidden}
.tdTextColumn { width: 200px }
.tdCheckColumn { width: 86px }
</style>
HTML:
<div style="display: flex" id="divPersonalTables">
<table id='tblTables' style="display: inline-block; width: 500px">
<thead>
<tr>
<th class="tdTextColumn">Forename</th>
<th class="tdTextColumn">Surname</th>
<th class="tdCheckColumn">Current</th>
<th style="width: 14px"></th>
</tr>
</thead>
<tbody style="display: block">
<tr>
<td style="display: none"></td>
<td class="tdTextColumn"><input type="text" /></td>
<td class="tdTextColumn"><input type="text" /></td>
<td class="tdCheckColumn"><input type="checkbox" /></td>
</tr>
</tbody>
</table>
</div>
The scrolling body style is applied to all tbody elements contained within that div, as there are two - one omitted here for conciseness.
So in summary: how can I make sure the browser is setting the columns to the widths I think it should be ?
The order of your columns does not match.
Put your hidden column to the right and you should be set.
<div style="display: flex" id="divPersonalTables">
<table id='tblTables' style="display: inline-block; width: 500px">
<thead>
<tr>
<th class="tdTextColumn">Forename</th>
<th class="tdTextColumn">Surname</th>
<th class="tdCheckColumn">Current</th>
<th style="width: 14px"></th>
</tr>
</thead>
<tbody style="display: block">
<tr>
<td class="tdTextColumn"><input type="text" /></td>
<td class="tdTextColumn"><input type="text" /></td>
<td class="tdCheckColumn"><input type="checkbox" /></td>
<td style="display: none"></td>
</tr>
</tbody>
</table>
btw: Why do you set <td style="display: none"></td> ?
I have a table inside a div, which contains an image with "position:absolute", "width:100%" and "height:auto". The div has a variable height, and I need the table to have the same height as the div, so the cells can have percentage heights...
It also would help if I found the way for the div, or a table, to adapt to the height of the image when it is a background-image. Because when I set the width as 100%, the image doesn't show full vertically, only horizontal and gets cut by the size of the table/div.
#footer {
width: 100%;
}
<div id="footer">
<img src="All/footer.png" style="position:absolute; width:100%">
<table>
<tr>
<td style="height:30%;"></td>
</tr>
<tr>
<td style="width:10%;"></td>
<td id="content" style="width:40%; height:30%;">ParagraphParagraphParagraphParagraphParagraph
<br/>ParagraphParagraphParagraphParagraphParagraph
<br/>ParagraphParagraphParagraphParagraphParagraph
<br/>ParagraphParagraphParagraphParagraphParagraph
<br/>ParagraphParagraphParagraphParagraphParagraph</td>
<td style="width:50%;"></td>
<td rowspan="5"></td>
</tr>
<tr>
<td style="height:25%;"></td>
</tr>
<tr>
<td id="slogan" colspan="3" style="height:10%">One Line Text. Slogan</td>
</tr>
<tr>
<td colspan="3" style="height:10%;"></td>
</tr>
</table>
</div>
I have a <table> that I would like to have a width that contains its children <td>.
Unfortunately, I can only assign classes to the <td> columns, and not the <th> columns - so I can't use table-layout: fixed as I usually would. w3 spec on table-layout: http://www.w3.org/TR/CSS2/tables.html#width-layout
Do you know how to make a <table> width equal to its children <td>?
HTML
<table>
<thead>
<tr>
<th>
First
</th>
<th>
Last
</th>
<th>
Info
</th>
<th>
Join Date
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first">
Don
</td>
<td class="last">
P
</td>
<td class="info">
Here is some rando info that can vary in length. I talk a lot.
</td>
<td class="join-date">
2013-03-01
</td>
</tr>
<tr>
<td class="first">
Tom
</td>
<td class="last">
Smith
</td>
<td class="info">
I'm a quiet person.
</td>
<td class="join-date">
2013-04-22
</td>
</tr>
</tbody>
</table>
CSS
table {
table-layout: fixed;
}
.first, .last, .join-date {
width: 250px;
}
.info {
min-width: 400px;
width: 200%; /* so this column will expand */
}
If the content is fixed, assign manual width to the of just the 1st .
The table will then adjust according to the width that you specify.
Eg :
<table>
<tr>
<td style="width:100px"></td>
</tr>
</table>
I am currently working on a web application in HTML5, where I have a table with two columns I want the first column width to be auto size so it's fit the content inside the column and the second column width to fill all the spare space
I tried the following:
<table style="width: 100%;">
<tr>
<td style="display: inline-block">
<div id="list">
<table>
...
</table>
</div>
</td>
<td style="width: 100%;">
<div id="canvas">
</div>
</td>
</tr>
But the second column always takes more width space than it should which cause the first column table rows to be multiline instead of one line.
Any idea?
Thanks
The first column's contents become multi-line because the only auto-size mode available is one that tries to shrink the column as much as possible. If you don't want the contents to wrap, specify this explicitly using white-space: nowrap.
.t1, .t2 { border-collapse: collapse; }
.t1 > tbody > tr > td { border: 1px solid red; }
.t2 > tbody > tr > td { border: 1px solid blue; }
.t3 td { white-space: nowrap; }
Example 1:
<table style="width: 100%;" class=t1>
<tr>
<td>
<div id="list">
<table class=t2>
<tr><td>Thingy stuff</td><td>foo bar</td></tr>
<tr><td>Thingy stuff</td><td>foo bar</td></tr>
</table>
</div>
</td>
<td style="width: 100%;">
<div id="canvas">
</div>
</td>
</tr>
</table>
<br>
Example 2:
<table style="width: 100%;" class=t1>
<tr>
<td>
<div id="list">
<table class="t2 t3">
<tr><td>Thingy stuff</td><td>foo bar</td></tr>
<tr><td>Thingy stuff</td><td>foo bar</td></tr>
</table>
</div>
</td>
<td style="width: 100%;">
<div id="canvas">
</div>
</td>
</tr>
</table>
No need to use JavaScript, and no need to set the right-hand cell to a specific width tailored for specific left-hand cell content.
The solution is pretty simple thanks to Iaasch suggestion to use jQuery
$(document).ready(function() {
$('#left').css('width', $('#places-table').width());
});
<table style="width: 100%;">
<tr>
<td id="left">
<div id="list">
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</div>
</td>
<td style="width: auto;">
<div id="canvas">
</div>
</td>
</tr>
</table>
When you set a td to width:100%;, it means 100% of the tr. So, it will be the entire row. Try making the right td like width:75%;.
jQuery is your friend.
<table style="width: 100%;">
<tr>
<td id="left" style="display: inline-block; width: 100%;">
<div id="list">
<table>
<tr>
<td>
...
</td>
</tr>
</table>
</div>
</td>
<td style="width: auto;">
<div id="canvas">
</div>
</td>
</tr>
</table>
and where you have your scripts add this:
$(document).ready(function() {
$('#left').css('width', $('#list').text().length * 7);
})
Can someone tell me how to create a scrollbar for the inner table? The inner table is not displayed within the container. I colored the background of the container yellow. The table itself is blue.
I wanna see a scroll bar within the table.
Source:
http://nopaste.info/e51385254e.html
and here:
<html>
<body>
<div style="width:1000px;margin-left:auto;margin-right:auto;background-color: yellow; height: 1000px;">
<table style="background-color: blue">
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
<tr>
<td>columnvalue1</td>
<td>columnvalue2</td>
<td>columnvalue3</td>
<td>columnvalue4</td>
</tr>
<tr>
<td colspan="4">
<table>
<tr>
<th>SubColumn1</th>
<th>SubColumn2</th>
<th>SubColumn3</th>
<th>SubColumn4</th>
<th>SubColumn5</th>
<th>SubColumn6</th>
<th>SubColumn7</th>
<th>SubColumn8</th>
<th>SubColumn9</th>
<th>SubColumn10</th>
<th>SubColumn11</th>
<th>SubColumn12</th>
<th>SubColumn13</th>
<th>SubColumn14</th>
</tr>
<tr>
<td>subvalue1</td>
<td>subvalue2</td>
<td>subvalue3</td>
<td>subvalue4</td>
<td>subvalue5</td>
<td>subvalue6</td>
<td>subvalue7</td>
<td>subvalue8</td>
<td>subvalue9</td>
<td>subvalue10</td>
<td>subvalue11</td>
<td>subvalue12</td>
<td>subvalue13</td>
<td>subvalue14</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<body>
</html>
wrap your inner table with a div. Make that div scrollable by giving it the width and height styles with overflow as auto or scroll.
<div style="width:1000px;margin-left:auto;margin-right:auto;background-color: yellow; height: 1000px;">
<table style="background-color: blue">
<tr>
<th>column1</th>
<th>column2</th>
<th>column3</th>
<th>column4</th>
</tr>
<tr>
<td>columnvalue1</td>
<td>columnvalue2</td>
<td>columnvalue3</td>
<td>columnvalue4</td>
</tr>
<tr>
<td colspan="4">
<div style="max-height: 100px; max-width: 100px; width: 100px; overflow: auto;">
<table>
<tr>
<th>SubColumn1</th>
<th>SubColumn2</th>
<th>SubColumn3</th>
<th>SubColumn4</th>
<th>SubColumn5</th>
<th>SubColumn6</th>
<th>SubColumn7</th>
<th>SubColumn8</th>
<th>SubColumn9</th>
<th>SubColumn10</th>
<th>SubColumn11</th>
<th>SubColumn12</th>
<th>SubColumn13</th>
<th>SubColumn14</th>
</tr>
<tr>
<td>subvalue1</td>
<td>subvalue2</td>
<td>subvalue3</td>
<td>subvalue4</td>
<td>subvalue5</td>
<td>subvalue6</td>
<td>subvalue7</td>
<td>subvalue8</td>
<td>subvalue9</td>
<td>subvalue10</td>
<td>subvalue11</td>
<td>subvalue12</td>
<td>subvalue13</td>
<td>subvalue14</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
that should work
Try this on div part
<div style="overflow:scroll width:1000px;margin-left:auto;margin-right:auto;
background-color: yellow; height: 1000px;">
If fail, try overflow:scroll on the style of the table.
Wrap your table with a div, which will have the same width with your container and overflow:scroll
Example: http://jsbin.com/uheha4