There is a wide table with table-layout: fixed. I'm trying to figure out how the width: min-content property should work for a cell of this table.
table {
table-layout: fixed;
width: 100%;
border: 1px solid #000;
border-collapse: collapse;
}
th,
td {
border: 1px solid #000;
}
.min {
width: min-content;
}
<table>
<thead>
<tr>
<th class="min">Col1</th>
<th>Col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>X</td>
<td>Y</td>
</tr>
</tbody>
</table>
I get the desired result in Firefox, but not in Chrome. Is this a Chrome bug or am I doing something wrong?
If it's a Chrome bug, what's the workaround for getting the minimum width of the first column, given that I want to use table-layout: fixed and don't want to look for a fixed cell width like width: 30px?
Related
table.perimeter td,
table.perimeter th
{
border: 1px solid blue;
border-collapse: collapse;
}
I've tried a few things nothing works.
the borders around each cell stay separated. help!
You have to apply border-collapse to the table (MDN).
table.perimeter {
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
}
<table class="perimeter">
<thead>
<tr>
<th colspan="2">The table header</th>
</tr>
</thead>
<tbody>
<tr>
<td>The table body</td>
<td>with two columns</td>
</tr>
</tbody>
</table>
Since we don't have your structure, I can't tell if table.perimeter is a sufficient selector to apply it to a specific table, you may have to add an id
table, th, td {
border: 1px solid blue;
border-collapse: collapse;
}
Or add a class to table like "table1"
.table1 {
border: 1px solid blue;
border-collapse: collapse;
}
I have a css table, the first 2 columns are already sticky and everything works fine, but I want the table head to be sticky as well.I just cant make it work.
I have already tried using a class for every with: position: sticky, top: 0.
this code makes the first 2 columns sticky
table {
table-layout: fixed;
width: 100%;
}
.fixed{
position: sticky;
left: 0;
}
.fixed2 {
position: sticky;
left: 120px;
}
what I want is the thead to be sticky as well.
Any help would be greatly appreciated. Thanks!
css
thead th { position: sticky; top: 0; }
html
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
</tbody>
</table>
Give table-fixed class to table tag and try this:
.table-fixed{
width: 100%;
tbody{
height:200px;
overflow-y:auto;
width: 100%;
}
thead,tbody,tr,td,th{
display:block;
}
tbody{
td{
float:left;
}
}
thead {
tr{
th{
float:left;
}
}
}
}
I have a table that is using an ellipsis but I'm stuck with conflicting arguements. The scenario is a I have a table with a tr tag and 2 td's. I need the first td to be the width of the text ( border-collapse: collapse ) which is fine, BUT, I need the width of the table to be 100% so in the 2nd td I can use the ellipsis. I haven't found a way to to border-collapse the first td and have the 2nd be used as an ellipsis.
http://jsfiddle.net/epywtvjf/2/
<table>
<tr>
<td>This is the first div.
</td>
<td>This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
</td>
</tr>
<tr>
<td>This is the first div.
</td>
<td>This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
</td>
</tr>
<tr>
<td>This is the first div.
</td>
<td>This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
</td>
</tr>
</table>
table{
table-layout: fixed;
width: 100%;
border-collapse: collapse;
}
table td{
white-space: nowrap;
border: none;
line-height:unset;
padding: 0px;
text-align: left;
}
You may need to add display flex to your tr. The following css worked for me.
table {
table-layout: fixed;
border-collapse: collapse;
width:100%;
}
tr{
display: flex;
}
td{
white-space: nowrap;
border: none;
padding: 0px;
text-align: left;
border-collapse: collapse;
}
#td2 {
overflow:hidden;
text-overflow: ellipsis;
}
http://jsfiddle.net/krewn/opputmg3/1/
You can specify specific css for each individual td by adding a class to the td in the html and then using the . class selector in css.
<table>
<tr>
<td class="col1">This is the first div.
</td>
<td class="col2">This is the second div. This is the second div.This is the second div. This is the second div. This is the second div.
</td>
</tr>
</table>
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
td{
white-space: nowrap;
border: none;
padding: 0px;
text-align: left;
border-collapse: collapse;
overflow: hidden;
}
.col2 {
text-overflow: ellipsis;
}
http://jsfiddle.net/krewn/qcypz5xk/
Changing table-layout: fixed and overflow:hidden?
Will that solve your issue?
here
I have a table with a fixed height and a variable number of tbody elements.
table {
border:1px solid black;
height:300px;
}
By default the page increases the height of the first tbody to fill the total height of the table (demo: http://jsfiddle.net/hvdcz8qr/). How can I have all the tbody elements stacked at the top of the table, and keep the extra height below the tbody elements?
Using elements other than table and tbody is not an option in my case.
[Update] I have added a second column to my example: http://jsfiddle.net/hvdcz8qr/10/
You can set the display of the tbody to block
table tbody {
display: block
}
Edit
Inorder to make the td use all the space:
table tbody tr {
display: flex;
}
td {
border:1px solid red;
display: block;
width: 100%;
}
New JSFiddle
After your comment in my suggestion try this:
table {
border: 1px solid black;
height: 300px;
}
td {
border: 1px solid red;
}
tbody {
float: left;
clear: left;
width: 100%;
display: inherit;
}
<table>
<tbody>
<tr>
<td>First tbody
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>second tbody
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>third tbody
</td>
</tr>
</tbody>
</table>
set width: 100% and display: inherit to take the whole table width.
I am trying to set the width of a TD to 50% in Firefox.
IE works fine.
table.tablelist
{
width: 100%;
border-collapse: collapse;
display: block;
}
.tablelist tr
{
border-bottom: 1px solid black;
}
.tablelist td
{
width: 50%;
}
<table class="tablelist">
<tbody>
<tr>
<td>
African
</td>
<td>
Jungle
</td>
</tr>
</tbody>
</table>
Firefox seems to ignore the width of the TD when set to a percentage value.
if I set the width to 200px then it will work fine.
What am I missing?
Remove display: block; from table.tablelist
Try "min-width" instead of "width".