My question is a little bit different than what is already out there.
I'm trying to create a table which has a certain width. The table has 3 columns. I want the first two columns to have an automatic width, and the third column to fill the remaining space.
Here's what I have so far, it's not quite working. The columns all have equal width. I have tried to set width: auto !important on the whole table, but then the third column is not filling the remaining space.
.message-timestamp {
width: auto !important;
}
.message-nick {
width: auto !important;
}
<table class="table table-hover" style="float:left; width:74%">
<tr>
<td class="message-timestamp">2015-02-03 11:15:16</td>
<td class="message-nick">ResidentBiscuit</td>
<td class="message-text">This is just a message</td>
</tr>
<tr>
<td class="message-timestamp">2015-02-03 11:16:35</td>
<td class="message-nick">SomeNick</td>
<td class="message-text">I'm replying to ResidentBiscuit</td>
</tr>
</table>
And here's the Bootply.
Hopefully I understood what you wanted here. Try this:
.message-timestamp {
width: auto;
white-space: nowrap;
}
.message-nick {
width: auto;
white-space: nowrap;
}
.message-text {
width: 100%;
}
This will give you auto-fit for the first two columns (and I added white-space to prevent the text from wrapping) and the third fills the row up.
You can try the following code by giving fixed width to first two columns and remove table width auto from css.
<table class="table table-hover" style="float:left; width:100%">
<tbody>
<tr>
<td class="message-timestamp" style="width:10%">2015-02-03 11:15:16</td>
<td class="message-nick" style="width:10%">ResidentBiscuit</td>
<td class="message-text">This is just a message</td>
</tr>
<tr>
<td class="message-timestamp">2015-02-03 11:16:35</td>
<td class="message-nick">SomeNick</td>
<td class="message-text">I'm replying to ResidentBiscuit</td>
</tr>
</tbody></table>
Hope this helps
Related
I can’t figure this one out for the life of me. Take a table that has 2 rows, each with 2 cells. The top-right and bottom-left cells are set to colspan="2" (so the table really has 3 columns). If the non-colspan cells have a 100×100 image inside, and the colspan cells have a 200×100 image, you’d expect the table width to be something like 300, right? Nope nope nope! It’s more like 400.
See this pen: http://codepen.io/sandwich/pen/apYPdL
It seems like the colspan’d cells are greedy for width, which goes contrary to typical table sizing of shrinking the cells to fit the content.
Can anyone shine a light on this behavior? In the pen, the desired result is for the first two rows to size themselves like they do when the third row is added, but without the third row having to be added.
If the non-colspan cells have a 100×100 image inside, and the colspan cells have a 200×100 image, you’d expect the table width to be something like 300, right?
Well probably if the <table> had border-collapse:collapse but as it is separate and 20px left and right borders , that's 80px extra for 2 columns. that's 380px at minimum.
Try table-layout:fixed the default is auto. Using fixed will allow you more control of a table's behavior.
CODEPEN
SNIPPET
// Toggle visibility of 3rd row, which has no spanned cells.
$(".toggle_3rd_row").click(function() {
$(".row_3").fadeToggle();
});
// Toggle applying CSS widths to <td>s
$(".toggle_widths").click(function() {
$("table").toggleClass("defined_sizes");
})
body {
padding: 20px;
}
img {
display: block;
}
table {
width: 400px;
margin: 20px 0;
table-layout: fixed;
}
table.defined_sizes .cell_1-1 {
width: 100px;
}
table.defined_sizes .cell_1-2 {
width: 220px;
}
table.defined_sizes .cell_2-1 {
width: 220px;
}
table.defined_sizes .cell_2-2 {
width: 100px;
}
table .row_3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="toggle_3rd_row">Toggle third row</button>
<button class="toggle_widths">Toggle cell widths in CSS</button>
<table border="1" cellpadding="0" cellspacing="20">
<caption>Why do the cells only size properly with the colspan-less third row present??</caption>
<tr>
<td class="cell_1-1">
<img src="http://placehold.it/100x100?text=100w">
</td>
<td colspan="2" class="cell_1-2">
<img src="http://placehold.it/222x100?text=222w">
</td>
</tr>
<tr>
<td colspan="2" class="cell_2-1">
<img src="http://placehold.it/222x100?text=222w">
</td>
<td class="cell_2-2">
<img src="http://placehold.it/100x100?text=100w">
</td>
</tr>
<tr class="row_3">
<td>
<img src="http://placehold.it/100x100?text=100w">
</td>
<td>
<img src="http://placehold.it/100x100?text=100w">
</td>
<td>
<img src="http://placehold.it/100x100?text=100w">
</td>
</tr>
</table>
I need to create an HTML table with the following layout:
[Name] [Message] Date]
Where the width of [Name] should be the width of the longest name (Up to a max), [Date]should be a fixed width of 95px (And floating to the right), while [Message] should take the remaining width.
I've tried using multiple div's, but I can't get the result I need, and a table seems much simpler.
So far, the following isn't working:
<table style="width: 100%">
<tr>
<td style="width: 100%; max-width: 100px">NAME</td>
<td style="width: 100%">message</td>
<td style="width: 95px">TIME</td>
</tr>
<tr>
<td style="width: 100%; max-width: 100px">NAME OTHER</td>
<td style="width: 100%">message</td>
<td style="width: 95px">TIME</td>
</tr>
</table>
Edit 1 Seems as though this example has exactly what I need. Although I still think a table would be neater.
Edit 2 The [Message] needs to allow for multiline...
Edit 3 Here is a working sample of what I need (Exactly) based on the link in Edit 1
This cannot be done in CSS alone, due to the requirements. The first column should be flexible, which is easy (just prevent line breaks and let the column take its natural width), and setting the last column width is trivial, but telling the browser to use all the rest in the mid column (instead of expanding the first column too) cannot be done in CSS. If you set its width to 100%, things work the desired way in some browsers, but other browsers (like IE) treat it differently. You would require a width of something plus 100% plus 95px to equal 100%, which is of course impossible, and browsers handle this in different ways.
However, with a little bit of JavaScript the medicine goes down: do as outlined above, with 100%, then postprocess the table by setting the first column to a specific width in pixels (using the value allocated by the browser), remove the width: 100% setting, and set table layout to fixed—which means that the browser now has two columns width fixed width, total width set to 100%, and one column with no width set, so it is easy to it to allocate the remaining width to the mid column.
<style>
td:first-child { white-space: nowrap }
td:nth-child(2) { width: 100% }
td:nth-child(3) { width: 95px }
</style>
<table border cellspacing=0 style="width: 100%">
<tr>
<td style="">NAME</td>
<td style="">message</td>
<td style="width:95px">TIME</td>
</tr>
<tr>
<td>NAME OTHER</td>
<td>message</td>
<td>TIME</td>
</tr>
</table>
<script>
(function () {
var row = document.getElementsByTagName('tr')[0];
var cell1 = row.children[0];
cell1.style.width = cell1.clientWidth + 'px';
row.children[1].style.width = 'auto';
document.getElementsByTagName('table')[0].style.tableLayout = 'fixed';
})();
</script>
For simplicity, this code is based on the assumption that there are no other tables on the page. Modify as needed. The attributes border cellspacing=0 are there just make the cell widths more visible.
Update: This does not address the issue of setting a maximum width on the first column. That requirement is underdefined unless you specify what should happen if the width is exceeded (truncation, word wrap, wrap anywhere, wrap with hyphenation?).
try this code .
.test
{
max-width:100px;
}
<table style="text-align: center;">
<tr>
<th>NAME</th>
<th>message</th>
<th style="width: 95px">TIME</th>
</tr>
<tr>
<td class="test">NAME OTHER</td>
<td>message</td>
<td style="width: 95px">TIME</td>
</tr>
</table>
The following .css code provides the template for the attached picture:
table {
display: table;
width: 100%;
table-layout: fixed;
position: absolute;
top: 10px;
empty-cells: hide;
}
td.small:first-Child {
vertical-align: top;
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
}
td.small:last-Child {
vertical-align: top;
width: 95px;
}
td.extend {
vertical-align: top;
word-wrap: break-word;
}
.userName a {
color: #9DC8FC;
}
<tr>
<td class="small userName">
<a title="Administrator" href="#">Administrator</a>
</td>
<td class="extend">
is it me you're looking for?
</td>
<td class="small">
10:14:01 AM
</td>
</tr>
Why does this table height not function?
<table border=1 bgcolor="green" width=80% height="30%">
<tr>
<td rowspan="2" >
This is 1st row 1st column
</td>
<td >
2
</td>
</tr>
</table>
http://jsfiddle.net/zQNS4/
just add the following to your css:
html, body{
height: 100%;
}
As other said, a table doesn't have a height-attriute, but most browsers intrepet that anyway. you can see the result on jsfiddle.
The reason you need to do this is that the parent element of anything that should have a height in % must have a height too (as Shadow Wizard said: "30% of what exactly?" - the parent has to have a height).
The table tag does not contain a height attribute. Try setting the height of the table using CSS styling.
table{
height: 30%;
}
<div style="height: 200px; overflow-y: scroll;">
<table border=1 bgcolor="green">
<tr>
<td rowspan="2" >
This is 1st row 1st column
</td>
<td>
2
</td>
</tr>
</table>
</div>
I just had the same issue.
I have table inside a container ( div config-table ), just setting height didn't work for me. I had to set overflow: auto ( for my case auto was needed ) and now work
.config-table {
height: 350px;
overflow: auto;
}
I have to dynamically create a table with a variable number of columns, determined at runtime.
Can somebody tell me if it's possible to have a html table with equal size columns that are fully stretched?
If you don't know how many columns you are going to have, the declaration
table-layout: fixed
along with not setting any column widths,
would imply that browsers divide the total width evenly - no matter what.
That can also be the problem with this approach, if you use this, you should also consider how overflow is to be handled.
<table width="400px">
<tr>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
<td width="100px"></td>
</tr>
</table>
For variable number of columns use %
<table width="100%">
<tr>
<td width="(100/x)%"></td>
</tr>
</table>
where 'x' is number of columns
ALL YOU HAVE TO DO:
HTML:
<table id="my-table"><tr>
<td> CELL 1 With a lot of text in it</td>
<td> CELL 2 </td>
<td> CELL 3 </td>
<td> CELL 4 With a lot of text in it </td>
<td> CELL 5 </td>
</tr></table>
CSS:
#my-table{width:100%;} /*or whatever width you want*/
#my-table td{width:2000px;} /*something big*/
if you have th you need to set it too like this:
#my-table th{width:2000px;}
Just add style="table-layout: fixed ; width: 100%;" inside <table> tag and also if you do not specify any styles and add just style=" width: 100%;" inside <table> You will be able to resolve it.
table {
width: 100%;
th, td {
width: 1%;
}
}
SCSS syntax
I have a table which is built with the contents coming from a returned dataset. What I want to do is stop a 'description' cell from expanding over 280px wide, no matter what the content length (its s string). I have tried:
<td align="left" valign="top" style="overflow:hidden;" nowrap="nowrap" width="280px" >
But this doesn't seem to work. I don't want it to wrap, nor do I want anything over 280px to be displayed.
It appears that your HTML syntax is incorrect for the table cell. Before you try the other idea below, confirm if this works or not... You can also try adding this to your table itself: table-layout:fixed.. .
<td style="overflow: hidden; width: 280px; text-align: left; valign: top; whitespace: nowrap;">
[content]
</td>
New HTML
<td>
<div class="MyClass"">
[content]
</div>
</td>
CSS Class:
.MyClass{
height: 280px;
width: 456px;
overflow: hidden;
white-space: nowrap;
}
<table border="1" width="183" style='table-layout:fixed'>
<col width="67">
<col width="75">
<col width="41">
<tr>
<td>First Column</td>
<td>Second Column</td>
<td>Third Column</td>
</tr>
<tr>
<td>Row 1</td>
<td>Text</td>
<td align="right">1</td>
</tr>
<tr>
<td>Row 2</td>
<td>Abcdefg</td>
<td align="right">123</td>
</tr>
<tr>
<td>Row 3</td>
<td>Abcdefghijklmnop</td>
<td align="right">123456</td>
</tr>
</table>
I know it's old school, but give that a try, it works.
may also want to add this:
<style>
td {overflow:hidden;}
</style>
Of course, you'd put this in a separate linked stylesheet, and not inline... wouldn't you ;)
To post Chris Dutrow's comment here as answer:
style="table-layout:fixed;"
in the style of the table itself is what worked for me. Thanks Chris!
Full example:
<table width="55" height="55" border="0" cellspacing="0" cellpadding="0" style="border-radius:50%; border:0px solid #000000;table-layout:fixed" align="center" bgcolor="#152b47">
<tbody>
<td style="color:#ffffff;font-family:TW-Averta-Regular,Averta,Helvetica,Arial;font-size:11px;overflow:hidden;width:55px;text-align:center;valign:top;whitespace:nowrap;">
Your table content here
</td>
</tbody>
</table>
Try the following css to stop expanding the table and it's cells.
table {
table-layout: fixed;
width: 100%;
}
th, td {
word-wrap: break-word;
}
table-layout: fixed will make your table fixed. But still the columns / cells will overlow or expand. To fix that issue use word-wrap: break-word
No javascript, just CSS. Works fine!
.no-break-out {
/* These are technically the same, but use both */
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
/* This is the dangerous one in WebKit, as it breaks things wherever */
word-break: break-all;
/* Instead use this non-standard one: */
word-break: break-word;
/* Adds a hyphen where the word breaks, if supported (No Blink) */
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
This could be useful. Like another answer it is just CSS.
td {
word-wrap: break-word;
}
Simply set the max-width attribute to 280px like this:
<td align="left" valign="top" style="overflow:hidden;" nowrap="nowrap" max-width="280px" width="280px">
This will solve your problem.
It's entirely possible if your code has enough relative logic to work with.
Simply use the viewport units though for some the math may be a bit more complicated. I used this to prevent list items from bloating certain table columns with much longer text.
ol {max-width: 10vw; padding: 0; overflow: hidden;}
Apparently max-width on colgroup elements do not work which is pretty lame to be dependent entirely on child elements to control something on the parent.
I've tested these solutions, and I suspect that word-wrap: break-word does not work on URLs. I could get a URL with spaces to break on a space, but the cells still expand despite fixed layout.