Even though i have applied table-layout fixed, table td cell are not taking width,
is it possible to apply width for td cell without changing table display property.
HTML:
table {
width: 500px;
border: 1px solid #dadada;
border-collapse: collapse;
table-layout: fixed;
}
td {
border: 1px solid #dadada;
}
.td-1 {
width: 480px;
}
.td-2 {
width: 200px;
}
.td-3 {
width: 290px;
}
.td-4 {
width: 100px;
}
.td-5 {
width: 390px;
}
<table>
<tr>
<td colspan="4" class="td-1">This is Amazing</td>
</tr>
<tr>
<td colspan="2" class="td-2">This is beautiful</td>
<td colspan="2" class="td-3">This is kinda of nothing</td>
</tr>
<tr>
<td class="td-4">This is Awesome</td>
<td colspan="3" class="td-5">This is Sick</td>
</tr>
</table>
Tables take their column widths from the first row. With this in mind I would approach this by creating an initial empty ghost row which does not have any colspan. This allows you to specify the exact width of each column. The row can be 1px high so it is barely visible.
Related
I want to create a table with the following widths of columns.
Is it possible to use both percents and absoulte widths as shown in my graphic?
This is because some columns make no sense below a certain width and always need the same width and others are more flexible.
Here you go:
#fixed{
table-layout:fixed;
}
td{
border:1px solid red;
}
td:nth-child(even){
background-color: grey;
}
<table id="fixed" border="0" style="width:100%;border-collapse:collapse;">
<tr>
<td style="width:50px;">1</td> <!--Fixed width-->
<td style="width:50%">Title</td>
<td style="width:50%">Interpret</td>
<td style="width:20px">1</td>
</tr>
</table>
What I could understand, you can achieve this by applying styles with table i.e table-layout: fixed; and width:100%;. Also width of td using px and %. According to your design, you are using four columns and I wrote code for the four columns;
Following would be your CSS;
table {
table-layout: fixed;
width: 100%;
}
td:first-child {
width: 50px;
}
td:last-child {
width: 20px;
}
.second-column {
width: 50%;
}
.third-column {
width: 50%;
}
td:nth-child(odd) {
background-color: grey;
}
td:nth-child(even) {
background-color: silver;
}
<table>
<tr>
<td>1</td>
<td class="second-column">2</td>
<td class="third-column">3</td>
<td>4</td>
</tr>
</table>
Hope this is what you required.
I have a 2x3 table, image on the left and text on the right with that layout staggered down the table.
When inserting an imagine in the table row it wont fill the section, it adds padding to the edges and is smaller than the table data next to it even though it is the size of the table row. The table data which contains text and a background color is bigger. Spacing within the table is off.
Any way to make the image fill the whole table cell and not add the extra space?
You can give the td a background image with the background-image CSS property.
td{
border: 1px solid black;
position: relative;
height: 50px;
width: 50px;
}
tr{
border:2px solid grey;
}
.imgcontainer{
width: 150px;
height: 100px;
background-image: url("https://www.w3schools.com/w3css/img_lights.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
}
<table>
<tr>
<td class="imgcontainer">
</td>
<td>Table Cell</td>
</tr>
</table>
Something like this? :D
table {
width: 100%;
border-collapse: collapse;
}
table td {
border: 1px solid black;
padding: 0px;
vertical-align: top;
}
table td img {
display: block;
width: 100%;
}
<table>
<colgroup>
<col width="50%"/>
<col width="50%"/>
</colgroup>
<tr>
<td>Text</td>
<td><img src="https://via.placeholder.com/100x30"></td>
</tr>
<tr>
<td><img src="https://via.placeholder.com/200x20"></td>
<td>Text<br/>Over<br/>Multiple<br/>lines</td>
</tr>
<tr>
<td>Text</td>
<td><img src="https://via.placeholder.com/400x50"></td>
</tr>
</table>
I need to change an html <table> in order to make it responsive,
But I want to work only with css
table{
width:100px;
height:100px;
background:green;
}
.a{
width:100% !important;
background-color:Red;
}
<table>
<tbody>
<tr>
<td class="a">AAA</td>
<td class="b">BBB</td>
<td class="c">CCC</td>
</tr>
</tbody>
</table>
What I want :
Without changing HTML, I want to have the AAA for the 100% width of the screen, and "BBB" + "CCC" below (under the AAA line with BBB : 50% width, and the "CCC" too in width)
I'm trying with no success, any help please ?
Are you against changing the default display: table; of the table ?
If no, you can do like this
.a{
width:100%;
background-color:Red;
}
.b, .c { width: 49%; display: inline-block }
table, tbody, tr, td { display: block; }
Fiddle
You can use float but that sort of negates the point of using a table in the first place.
If this isn't tabular data (and the layout suggests it's not) then you really should be looking for an alternative HTML structure.
* {
box-sizing: border-box;
}
table {
table-layout: fixed;
width: 100%;
}
td {
width: 110px;
float: left;
width: 50%;
border: 1px solid grey;
}
td.a {
width: 100%;
}
<table>
<tbody>
<tr>
<td class="a">AAA</td>
<td class="b">BBB</td>
<td class="c">CCC</td>
</tr>
</tbody>
</table>
I need to have table that has rows with fixed height and that table itself must be of fixed height.
For example all rows would be of 8px height and table would be of height 400px. If there would be less rows than total height of table, then remaining part of the table should be like a gap.
But css automatically readjusts row height if I set fixed height on table.
I need table to look like this:
|row |cont |
|row |cont |
|row |cont |
| |
| |
| |
|End of table|
I tried this:
CSS:
.t-table {
border: 1px solid black;
height: 400px;
border-collapse: collapse;
}
td {
border: 1px solid black;
}
HTML:
<table class="t-table">
<tr style="line-height: 8px">
<td>A</td>
<td>B</td>
</tr>
<tr style="line-height: 8px">
<td>1</td>
<td>2</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Or you can check it here: https://jsfiddle.net/utrwqfux/
P.S. So if I force height on table it will ignore height on rows. Last tr was without height, so the idea was for it to re-size automatically filling empty gap.
You can set height:8px to the first and second tr. And remove the middle border from the empty cells in the last tr.
.t-table {
border: 1px solid black;
height: 400px;
border-collapse: collapse;
}
.t-table td {
border: 1px solid black;
}
.t-table td:empty {
border-left: 0;
border-right: 0;
}
<table class="t-table">
<tr style="line-height: 8px; height: 8px;">
<td>A</td>
<td>B</td>
</tr>
<tr style="line-height: 8px; height: 8px;">
<td>1</td>
<td>2</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
Basically I did this by creating the table in CSS and not in HTML. This give a bit more control.
HTML:
<div class="table">
<div class="tr">
<div class="td">A</div>
<div class="td">B</div>
</div>
<div class="tr">
<div class="td">1</div>
<div class="td">2</div>
</div>
</div>
CSS:
.table {
background: rebeccapurple;
display: table;
height: 400px;
table-layout: fixed;
width: 400px;
}
.td {
background: hotpink;
display: table-cell;
height: 8px;
width: 200px;
}
Live example: http://codepen.io/WartClaes/pen/mVxdQg?editors=1100
The only issue here is that the td's will be higher then 8px since their content is bigger then that. Is 8px the actual height?
I agree with Wart Claes on display divs as table elements vs using old school table layout. But the problem you're running into is that the browser is adding a tbody element into your table. This element is forcing the row height. To fix this there are two ways.
1) Set the tbody to display as block, this will make the browser disregard its display properties and do exactly as you want.
https://jsfiddle.net/benneb10/utrwqfux/1/
tbody{
display:block;
}
2) Set the table height of the table with the tbody:
tbody{
height:400px;
overflow:auto;
overflow-x:hidden;
border: 1px solid black;
}
However, doing this won't make your table 400px as you want. It will force the tr to be exactly 8px though.
https://jsfiddle.net/benneb10/utrwqfux/2/
This would be the proper solution for extending the table to a certain height by keeping the vertical lines.
CSS
table {
border: 1px solid black;
min-height: 400px; /* table height here */
border-collapse: collapse;
}
td {
border: 1px solid black;
}
tr {
height: max-content;
}
tr:last-child {
height: auto;
}
Live Example: https://jsfiddle.net/sandy912/20z45kaj/3/
.t-table {
border: 1px solid black;
height: 400px;
border-collapse: collapse;
display: table-cell;
}
td {
border: 1px solid black;
padding:5px;
}
https://jsfiddle.net/pf8g49h2/
I have a table and I want to set a fixed width of 30px on the td's. the problem is that when the text in the td is too long, the td is stretched out wider than 30px. Overflow:hidden doesn't work either on the td's, I need some way of hiding the overflowing text and keeping the td width 30px.
<table cellpadding="0" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>
It's not the prettiest CSS, but I got this to work:
table td {
width: 30px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
Examples, with and without ellipses:
body {
font-size: 12px;
font-family: Tahoma, Helvetica, sans-serif;
}
table {
border: 1px solid #555;
border-width: 0 0 1px 1px;
}
table td {
border: 1px solid #555;
border-width: 1px 1px 0 0;
}
/* What you need: */
table td {
width: 30px;
overflow: hidden;
display: inline-block;
white-space: nowrap;
}
table.with-ellipsis td {
text-overflow: ellipsis;
}
<table cellpadding="2" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>
<br />
<table class="with-ellipsis" cellpadding="2" cellspacing="0">
<tr>
<td>first</td><td>second</td><td>third</td><td>forth</td>
</tr>
<tr>
<td>first</td><td>this is really long</td><td>third</td><td>forth</td>
</tr>
</table>
you also can try to use that:
table {
table-layout:fixed;
}
table td {
width: 30px;
overflow: hidden;
text-overflow: ellipsis;
}
http://www.w3schools.com/cssref/pr_tab_table-layout.asp
It is not only the table cell which is growing, the table itself can grow, too.
To avoid this you can assign a fixed width to the table which in return forces the cell width to be respected:
table {
table-layout: fixed;
width: 120px; /* Important */
}
td {
width: 30px;
}
(Using overflow: hidden and/or text-overflow: ellipsis is optional but highly recommended for a better visual experience)
So if your situation allows you to assign a fixed width to your table, this solution might be a better alternative to the other given answers (which do work with or without a fixed width)
The above suggestions trashed the layout of my table so I ended up using:
td {
min-width: 30px;
max-width: 30px;
overflow: hidden;
}
This is horrible to maintain but was easier than re-doing all the existing css for the site. Hope it helps someone else.
This workaround worked for me...
<td style="white-space: normal; width:300px;">
Put a div inside td and give following style width:50px;overflow: hidden; to the div
Jsfiddle link
<td>
<div style="width:50px;overflow: hidden;">
<span>A long string more than 50px wide</span>
</div>
</td>
Chrome 37.
for non fixed table:
td {
width: 30px;
max-width: 30px;
overflow: hidden;
}
first two important! else - its flow away!
Just divide the number of td to 100%. Example, you have 4 td's:
<html>
<table>
<tr>
<td style="width:25%">This is a text</td>
<td style="width:25%">This is some text, this is some text</td>
<td style="width:25%">This is another text, this is another text</td>
<td style="width:25%">This is the last text, this is the last text</td>
</tr>
</table>
</html>
We use 25% in each td to maximize the 100% space of the entire table