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".
Related
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?
Using only HTML and CSS,
I wish to have a table like the following:
Header1 Header2
-------------- --------------------
L1Col1 content L1Col2 wider content
L2Col1 datum L2Col2 datum2
Where the underline automatically sizes to the
table column width.
Help!
Try this:
CSS:
.sample-table {
width: 50%;
text-align: left;
border-spacing: 25px 0;
}
.sample-table th {
border-bottom: 1px dashed #000;
}
.sample-table td,
.sample-table th {
padding: 3px;
}
HTML:
<table class="sample-table">
<tr>
<th>Header1</th>
<th>Header2</th>
</tr>
<tr>
<td>L1Col1 content</td>
<td>L1Col2 wider content</td>
</tr>
<tr>
<td>L2Col1 datum</td>
<td>L2Col2 datum2</td>
</tr>
</table>
Azu,
Thanks for your answer.
The "border-spacing" usage was completely enlightening to me.
I modified the CSS to the following:
.sample-table {
text-align: left;
border-spacing: 25px 0;
}
.sample-table th {
border-bottom: 2px solid #000;
}
.sample-table td,
.sample-table th {
padding: 3px 0px;
}
This gives me exactly what I wanted.
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
My table cell has fixed width and contains select list and one or two buttons in a row. Select should fill all the space before buttons. I solved this with div wrapper, but my boss doesn't allow me to use any additional divs because from his point of view each element must symbolize some program data. He alsow doesn't allow me to use flexboxes.
Here's the code of how it should look like
td {
border: 1px solid black;
padding: 1px;
min-width: 300px;
}
table {
margin: 50px;
background-color: green;
border-collapse: collapse;
}
button {
padding: 1px;
float:right;
}
select {
width: 100%;
}
#wrap {
overflow:hidden;
}
<table>
<tr>
<td>
<button>+</button>
<div id="wrap">
<select>
<option value>ttttttttt</option>
</select>
</div>
</td>
</tr>
</table>
Is there a way I can do this without additional elements or non-cross-browser solutions like flexboxes?
Try this option with help of inner table and without any additional wrappers. https://jsfiddle.net/xkLaq47m/
/---CSS---/
td {
border: 1px solid black;
padding: 1px;
min-width: 300px;
}
table {
margin: 50px;
background-color: green;
border-collapse: collapse;
}
.inner-table{
margin: 0;
}
.inner-table__button-cell{
min-width: 15px;
}
button {
padding: 1px;
float:right;
}
select {
width: 100%;
}
/*---HTML---*/
<table>
<tbody>
<tr>
<td>
<table class="inner-table">
<tbody><tr>
<td>
<select>
<option value="">ttttttttt</option>
</select>
</td>
<td class="inner-table__button-cell">
<button>+</button>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
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.