https://jsfiddle.net/oo73ohtr/
HTML:
<div class="foo">
<table>
<tr>
<td>bar</td>
<td>baz</td>
</tr>
</table>
</div>
CSS:
.foo {
width: 300px;
overflow: auto;
}
td {
border: 1px solid #000;
width: 200px;
}
I would like every td to be 200px wide and .foo to get a vertical scrollbar.
Instead the table gets shrunk to the size of .foo and the td shrink to fit the space available.
What am I doing wrong?
Setting it to min-width instead of width should do the trick.
td {
border: 1px solid #000;
min-width: 200px;
}
Related
I often use this HTML/CSS structure to create a mobile-friendly table (It changes layout on narrow (mobile) screens; something very lacking in CSS frameworks) and it has been quite reliable for me. In my main project I have several tables with lots of data and varying widths.
If you open this codepen and change the view to 'debug' you can shrink the page width. Past 500px the table layout will change. The thead is hidden, secondary labels are shown and the tds are set to display: flex. (I like to use the responsive device toolbar in the inspector).
Under the table is a more simple set of divs, that behaves the way I want the divs inside the TD to work, but for some reason, the second div inside the td stops shrinking at a certain point. I have tried different combinations of word-wrap and white space but so far no luck. Seems the difference has to do with these divs being inside a table...
Is this just a limitation of tables or is there a way I can make the right div shrink like the second example?
Thanks!
https://codepen.io/sinrise/pen/qoypYJ
<table cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>number</th>
<th>content</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="td-label">number</div>
<div>this is the first one</div>
</td>
<td>
<div class="td-label">number</div>
<div>this is the second one</div>
</td>
</tr>
</tbody>
</table>
<div class="cont">
<div class="in1">oneoneone oneone one oneoneoneoneoneon</div>
<div class="in2">two two twotwotwo twotwotwotwo</div>
</div>
table { width: 100%; table-layout: fixed; margin: 0 0 10px; }
th { padding: 10px 10px 0; text-align: left; }
td { padding: 10px; border: 1px solid #ccc; }
.td-label {
display: none;
min-width: 100px;
max-width: 100px;
font-weight: bold;
}
#media(max-width: 500px) {
thead { display: none; }
td {
display: flex;
margin: 0 0 10px;
> div:not(.td-label) {
word-wrap: break-word;
min-width: 1px;
}
}
.td-label {
display: table;
}
}
.cont {
display: flex;
border: 1px solid black;
> div {
&:first-of-type {
min-width: 100px;
max-width: 50px;
}
min-width: 1px;
border: 1px solid #aaa;
word-wrap: break-word;
}
}
The trick is to set the table width to 100%, add a min-width to the second div, and set display: table on the second div. I updated the pen and code above to reflect.
I'm trying to set the maximum width of a table, but it doesn't seem to be working. If a word inside the table is too long, it automatically expands the width of the table. How do I stop that from happening, and instead have the word that's too long go to the next line?
<style>table {
max-width: 300px;
}
table,
td {
border: 1px solid red;
}
div {
border: 1px solid blue;
word-wrap: break-word;
}
</style>
<table>
<tr>
<td>
<div> hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
</div>
</td>
</tr>
</table>
If you want to make your max-width to work, you need to set the CSS property table-layout: fixed; on the table and use width, not max-width.
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Add the following rule your css section.
div{
overflow-wrap: break-word;
max-width: 300px;
word-wrap: break-word; will work if you have width assigned to the container, you are applying this property to. Thus, you will have to assign width:100px; or desired width to div tag.
<style type="text/css">
div {
width: 100px; /* this will limit the length of the word to 100px */
border: 1px solid blue;
word-wrap: break-word;
}
</style>
Putting max-width inside the div solves the problem.
<style>
table,td {
border: 1px solid red;
}
div {
border: 1px solid blue;
word-wrap: break-word;
max-width: 300px;
}
</style>
<table>
<tr>
<td>
<div> hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello </div>
</td>
</tr>
</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 know there are a lot of answers out there about this problem. But I can't seem to get it. Here is my example:
http://jsfiddle.net/xyJkc/2/
see the first div does not fill the total height of the td. I want the divs in each td to fill up the complete height no matter how much, or how little, text is in each one.
I guess the unclear thing is that the height of each row is not explicitly defined, but it is defined by the maximum height of the content of the cells.
Thanks the help!
here's the code:
html:
<table>
<tr>
<td>
<div>text</div>
</td>
<td>
<div>many lines of text. More and more.</div>
</td>
</tr>
</table>
css:
table {
width:100px
}
td {
border: 1px solid grey;
height: 100%;
}
div {
height: 100%;
border: 1px solid;
}
please try:
the div will be 100%; height.
div{
height: 100%;
border: 1px solid;
display:inline-block;
}
can you add display:inline-table;
div{
height: 100%;
display:inline-table;
border: 1px solid;
}
http://jsfiddle.net/xyJkc/13/
You can set a height on the table or tr. Then the div will fill the whole td.
Example:
tr{
height: 5em; /* or px */
}
I think it's because your div has position value set to static (by default). You can fix it by giving position:absolute; property to the tr or if you don't want to do this you can use jQuery:
$(function()
{
$('div').height($('tr').height());
});
Here is my DOM:
<html>
<body>
<table>
<tr>
<td>
hello
</td>
</tr>
</table>
</body>
</html>
and my CSS:
html, body {
height: 100%;
width: 100%;
}
table {
height: 100%;
width: 100%;
}
td {
border: 1px solid gray;
height: 10%;
width: 10;
}
What I want to do is to re-size the height and width of the TD element using percentage. But this code doesn't work. I understand that the size of a child element will inherit the size of it's parent element. So TD will inherit the size from TABLE and then TABLE from BODY or HTML parent elements. My code doesn't do that. But if I do width: 10%; on TABLE, then it gets 10% of the width of the BODY/HTML element. Same as with the height: 10%. But why doesn't it work on TD tag?
td tags are forced to take up all of the remaining space in their parent.
So, your width: 10%; is completely ignored by the layout.
See this non-working JSFiddle Demo.
But, if we add some display: inline-block; to the td, then it fixes the problem.
See this (now) working JSFiddle Demo.
I suggest you add another td tag, and give it a width of 90%
<table>
<tr class="tr1">
<td class=td1>
hello
</td>
<td class="td2"></td>
</tr>
<tr class="tr2">
<td></td>
</tr>
</table>
CSS:
html, body {
height: 100%;
width: 100%;
margin:0;
}
table {
height: 100%;
width: 100%;
}
td.td1 {
border: 1px solid gray;
height: 10%;
width: 10%;
}
td.td2{
border: 1px solid gray;
width: 90%;
}
tr.tr1{
height:10%;
}
tr.tr2{
height:90%;
}
For the height, you will need to add another tr row, and give it a 90%. Give the first row a 10% height like you wanted to do with the td - http://jsfiddle.net/R5uRW/6/