Width property isn't working here:
<!DOCTYPE html>
<html>
<head>
<style>
td {
height: 50px;
width: 25px;
border: 1px dashed blue
}
table {
border: 1px solid black;
width: 400px;
height: 400px
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
Table cells don't want to become narrow. Why? Also, it seems that there is something wrong with height property too.
It's because the table is set at 400px width. The cells you have will auto expand to fill the width of the table. Remove the 400px width of the table and your cells should become 25px each.
As HaukurHaf mentioned, the <td> are expanding automatically expanding to fill the <tr> .
You can force the <td> to accept the specified width and height by changing it's display property to inline-block.
JSFiddle
Your table styles are overriding your td styles.
To see what I mean:
<!DOCTYPE html>
<html>
<head>
<style>
td {
height: 50px;
width: 25px;
border: 1px dashed blue
}
table {
border: 1px solid black;
/*width: 400px;
height: 400px;*/
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
and here's a working JSfiddle
Related
If TBODY height is 300px and the displayed content inside it will be only 50px, it shows empty space at the bottom of the content as from 51PX to 300PX, My intension is If content > 300 using overflow:auto I want to display scrollbar. Please suggest me
<!DOCTYPE html>
<html>
<head>
<style>
div.TableContainerToScroll {
height: 651px;
overflow: auto;
width: 100%;
margin: 15px 0 0 0;
position: relative;
vertical-align:top;
}
html>/**/body div.TableContainerToScroll table>tbody {
overflow: auto;
height: 200px;
overflow-x: hidden;
background-color: #00FF00;
}
div.otherclass {}
</style>
</head>
<body>
<div id="pdata" class="TableContainerToScroll">
<div class="otherclass">
<TABLE cellSpacing=0 cellPadding=0 width="97%" align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=0 width="100%" align=center border=0>
<TBODY>
<TR>
<TD>
<TABLE cellSpacing=0 cellPadding=2 width="100%" align=center border=0>
<TBODY>
<TR>
<TD align=center><BR>Sample Text Here<BR></TD></TR></TBODY></TABLE> </TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE><BR>
</div>
</div>
</body>
The problem is that rows are at least as tall as the content. See Table height algorithms:
The height of a 'table-row' element's box is calculated once the user
agent has all the cells in the row available: it is the maximum of the
row's computed 'height', the computed 'height' of each cell in the
row, and the minimum height (MIN) required by the cells.
And max-height won't help, because
In CSS 2.1, the effect of 'min-height' and 'max-height' on tables,
inline tables, table cells, table rows, and row groups is undefined.
Then, you can't make the contents overflow the cells. However, you can wrap the contents in a container with max-height, and let it overflow:
div {
overflow: auto;
height: 175px;
}
p {
border: 1px solid;
}
p.tall {
height: 400px;
}
table {
border: 1px solid blue;
display: inline-table;
}
<table>
<tr>
<td>
<div>
<p class="tall">I am so tall</p>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div>
<p>I am not tall</p>
</div>
</td>
</tr>
</table>
Using the suggestions of this fiddle I made a scrolling table with fixed headers:
<!DOCTYPE html>
<html lang='en' dir='ltr'>
<head>
<meta charset='UTF-8' />
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<style>
body {
font-family: sans-serif;
font-size: 20px;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 2em;
background: #808;
}
#container {
overflow-y: auto;
height: 200px;
padding-top: 1em;
}
table {
border-spacing: 0;
border-collapse: collapse;
width: 100%;
}
th {
height: 10px;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
background: #0f0;
border: 2px solid #f0f;
white-space: nowrap;
}
th > div {
position: absolute;
background: #ff0;
color: #00f;
padding: 1em;
top: 0;
margin-left: auto;
line-height: normal;
border: 3px solid #805;
opacity: 0.5;
}
td {
border-bottom: 3px solid #666;
background: #fdd;
color: #c0c;
padding: 1em;
}
td:first-child {
border-right: 1px solid #aaa;
font-family: serif;
text-align: center;
}
td:last-child {
border-left: 1px solid #aaa;
}
</style>
<title>test</title>
</head>
<body>
<div>
<section>
<div id='container'>
<table>
<thead>
<tr class='header'>
<th>
head 100
<div id='h1'>head 1</div>
</th>
<th>
head 2
<div id='h2'>head 2</div>
</th>
<th>
head last
<div id='hL'>head last</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aardvark</td>
<td>beta<br />longer text<br />spanning on some lines</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta<br />long text</td>
<td>omega and something else</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega</td>
</tr>
<tr>
<td>alfa</td>
<td>beta</td>
<td>omega just to finish</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
</body>
</html>
The scrolling works smoothly, as you can test on https://jsfiddle.net/Marco_Bernardini/h8ukwf3w/4/ but it has an aesthetic issue: the header of the columns are not centered.
The TH height will be set to 0 and its borders will be removed: now it has an ugly color just to see it during the debug phase.
I tested many solutions, and some of them are commented away in the fiddle:
with width: -moz-available; every header starts at the correct position, but all of them end at the right side of the table; I added the opacity: 0.5; so this behavior can be clearly seen
with width: 100%; the DIV takes the width of the whole table, not of the parent TH
with width: inherit; nothing happens (the DIV inside the TH don't inherit the TH width)
the margin-left: auto; margin-right: auto; trick doesn't give a result
Even using two nested DIV inside the TH is not a solution, since at least the outer one must fill the TH, which is not the case.
The number of columns is not determined a priori, because the table will receive data from a database, and it's up to users to decide which columns will be shown. This also prevents me to use fixed widths.
How can I center that DIV inside the TH width?
Short answer: you can't.
Your divs are positioned absolutely which removes them from the regular flow of the document, hence the width of the parent can have no effect.
You could center them if the divs were absolute in relation to their parent... however, you cannot set your parent's position to relative, because the divs will then appear inside of the #container element which has its overflow hidden. If you nudge them up to where they should be, they will no longer be visible. Not to mention that you would not be able to fix them to the top.
I can think of no good way of doing this using only CSS, especially if the number and width of columns is not fixed.
Following HTML renders incorrectly with latest Firefox. IE and Chrome are ok but Firefox displays white vertical line inside the table cell.
Example rendered with Firefox 21 can be found here:
http://tinypic.com/r/2w2qvb6/5
Is this a bug in Firefox or am I missing something?
HTML:
<table>
<tbody>
<tr>
<td>
<div></div>
</td>
</tr>
</tbody>
</table>
CSS:
table{
border: 2px solid red;
border-collapse: collapse;
}
td{
border: 2px solid red;
padding: 0px;
}
div{
background:blue;
height: 100px;
width: 100px;
}
Removing border-collapse: collapse; removes the vertical white line. But I really want to collapse the table borders.
JSfiddle: http://jsfiddle.net/FeuBx/
Update: The problem appears only with 100% browser zoom level (Ctrl + 0).
Your code works as is if you set an HTML5 DOCTYPE at the top of your page as in:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css">
table{
border: 2px solid red;
border-collapse: collapse;
}
td{
border: 2px solid red;
padding: 0px;
}
div{
background:blue;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<div></div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I am trying to build a html table but I want to force all rows to have the same height (no matter how much content is in the cells). If a cell overruns the space, I want it to just cut off the text and hide the rest.
Is this possible using CSS, etc?
IE only
#fixedheight {
table-layout: fixed;
}
#fixedheight td {
height: 20px;
overflow: hidden;
width: 25%;
}
<table id="fixedheight">
<tbody>
<tr>
<td>content</td>
<td>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</td>
<td>more content</td>
<td>small content</td>
<td>enough already</td>
</tr>
</tbody>
</table>
Universal solution
#fixedheight {
table-layout: fixed;
}
#fixedheight td {
width: 25%;
}
#fixedheight td div {
height: 20px;
overflow: hidden;
}
<table id="fixedheight">
<tbody>
<tr>
<td>
<div>content</div>
</td>
<td>
<div>lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such</div>
</td>
<td>
<div>more content</div>
</td>
<td>
<div>small content</div>
</td>
<td>
<div>enough already</div>
</td>
</tr>
</tbody>
<table>
Set the CSS height property to what you want the cell heights to be, and use overflow: hidden (see CSS overflow) to prevent contents from expanding the cells.
Give the table a class:
<table class="myTable">...</table>
And in the CSS, try the following:
table.myTable td {
height: 20px;
overflow: hidden;
}
The CSS Styles you will want to set are:
display:block, min-height, and max-height.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
html{font-size:16px;}
table{}
table tr{
display:block;
border-bottom:solid green 1px;
height:.8em;
min-height:.8em;
max-height:.8em;
background-color:#E300E3;
overflow:hidden;
}
</style>
</head>
<body>
<table id="MyTable">
<tr><td>16px Font-Size</td><td>Column2</td></tr>
</table>
</body>
</html>
I have a HTML table and I want the first few columns to be quite long. I am doing this in CSS:
td.longColumn
{
width: 300px;
}
and here is a simplified version of my table
<table>
<tr>
<td class='longColumn'></td>
<td class='longColumn'></td>
<td class='longColumn'></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
[ . . and a bunch more columns . . .]
</tr>
</table>
For some reason the table seems to make this column < 300px when there are a lot of columns. I basically want it to keep that width no matter what (and just increase the horizontal scroll bar).
The container that the table is inside, doesn't have any type of max width so I can't figure out why it's squeezing this column down as opposed to respecting this width.
Is there anyway around this so no matter what, this column will stay a certain width?
Here is the CSS of the outer container div:
#main
{
margin: 22px 0 0 0;
padding: 30px 30px 15px 30px;
border: solid 1px #AAAAAA;
background-color: #fff;
margin-bottom: 30px;
margin-left: 10px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
float: left;
/*width: 1020px;*/
min-width:1020px;
display: block;
overflow: visible;
z-index: 0;
}
You may get more luck with setting widths for your table cells if you apply the rule table-layout: fixed to the table - this has helped me with a lot of cell-sizing issues when using tables. I would not recommend switching to using just DIVs to arrange your content if it fits the purpose of tables - to display multidimensional data.
Giving it both max-width and min-width attributes should work.
I agree with Hristo but there are some cases where table need to be used and solution to your table problem is adding below class to the table and then changing any td width as per your need.
.tables{ border-collapse:collapse; table-layout:fixed;}
I hope this helps for someone who is looking for table solution!
I had the same problem with a bunch of columns where I wanted spacers columns.
I used to do:
<td style='width: 10px;'> </td>
But when the table was wider than window, the spacers were not really 10px, but maybe 5px.
And using only DIVs without a TABLE was not an option in my case.
So I tried:
<td><div style='width: 10px;'></div></td>
And it worked very well ! :)
The best way to set your column widths (td's) is to use a table header (th's). Table headers will set the width on your td's automatically. You just have to make sure that your columns inside your thead are the same number of columns in your tbody.
Check it out here:
http://jsfiddle.net/tKAj8/
HTML
<table>
<thead>
<tr>
<th class="short-column">Short Column</th> <!-- th sets the width -->
<th class="short-column">Short Column</th> <!-- th sets the width -->
<th class="long-column">Long Column</th> <!-- th sets the width -->
</tr>
</thead>
<tbody>
<tr>
<td class="lite-gray">Short Column</td> <!-- td inherits th width -->
<td class="lite-gray">Short Column</td> <!-- td inherits th width -->
<td class="gray">Long Column</td> <!-- td inherits th width -->
</tr>
</tbody>
</table>
CSS
table { table-layout: fixed; border-collapse: collapse; border-spacing: 0; width: 100%; }
.short-column { background: yellow; width: 15%; }
.long-column { background: lime; width: 70%; }
.lite-gray { background: #f2f2f2; }
.gray { background: #cccccc; }
I had issues with not being able to size columns in a table-layout: fixed table that was using a colspan. For the benefit of anyone experiencing a variant of that issue where the suggestion above doesn't work, colgroup worked for me (variation on OP's code):
div {
margin: 22px 0 0 0;
padding: 30px 30px 15px 30px;
border: solid 1px #AAAAAA;
background-color: #fff;
margin-bottom: 30px;
margin-left: 10px;
_height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
float: left;
/*width: 1020px;*/
min-width:1020px;
display: block;
overflow: visible;
z-index: 0;
}
td.longColumn {
width: 300px;
}
table {
border: 1px solid;
text-align: center;
width: 100%;
}
td, tr {
border: 1px solid;
}
<div>
<table>
<colgroup>
<col class='longColumn' />
<col class='longColumn' />
<col class='longColumn' />
<col/>
<col/>
<col/>
<col/>
</colgroup>
<tbody>
<tr>
<td colspan="7">Stuff</td>
</tr>
<tr>
<td>Long Column</td>
<td>Long Column</td>
<td>Long Column</td>
<td>Short</td>
<td>Short</td>
<td>Short</td>
<td>Short</td>
</tr>
</tbody>
</table>
</div>
For those that are having Table Cell/Column width problems and table-layout: fixed did not help.
When applying fixed widths to table cells (<td> or <th>), do not assign a width to all of the cells. There should be at least one cell with an (auto) width. This cell will act as a filler for the remaining space of the table.
e.g.
<table>
<thead>
<tr>
<th style="width: 150">Assigned 150 width to Table Header Cell</th>
<th style="width: 100">Assigned 100 width to Table Header Cell</th>
<th>No width assigned</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 150">Assigned 150 width to Table Body Cell</td>
<td style="width: 100">Assigned 100 width to Table Body Cell</td>
<td>No width assigned</td>
</tr>
</tbody>
</table>
P.S. you can use style classes here, you don't need to use an in-line style.
Use table-layout property and the "fixed" value on your table.
table {
table-layout: fixed;
width: 300px; /* your desired width */
}
After setting up the entire width of the table,
you can now setup the width in % of the td's.
td:nth-child(1), td:nth-child(2) {
width: 15%;
}
You can learn more about in on this link: http://www.w3schools.com/cssref/pr_tab_table-layout.asp
Can't modify <td> width; that is, column width isn't settable. You can add the styling white-space:nowrap; which might help. Or you can add s to add space to columns.
Maybe you could set col width the HTML way: <td width="70%">January>/td>
Unfortunately, in HTML 4.01 and later, that way isn't valid.
How about something like this...
http://jsfiddle.net/qabwb/1/
HTML
<div id="wrapper">
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
<div class="row">
<div class="column first longColumn">stuff</div>
<div class="column longColumn">more stuff</div>
<div class="column">foo</div>
<div class="column">jsfiddle</div>
</div>
</div>
CSS
#wrapper {
min-width: 450px;
height: auto;
border: 1px solid lime;
}
.row {
padding: 4px;
}
.column {
border: 1px solid orange;
border-left: none;
padding: 4px;
display: table-cell;
}
.first {
border-left: 1px solid orange;
}
.longColumn {
min-width: 150px;
}