I'm having problems trying to embed a table in an existing HTML page with some CSS.
This CSS is hiding the header of the table by default with a style definition like:
.tablestuff thead {
display: none;
}
But I want the table to show, so I tried setting the style on the thead element with "display:block" (with javascript). That makes the header display, but the columns of the header don't line up with the td columns.
I have reduced my HTML to the following (hopefully with minimal typos) and showing the style on the thead element as set by javascript.
<div class="tablestuff">
<table border="1">
<thead style="display:block">
<tr>
<th id="th1" style="width: 20px"></th>
<th id="th2" style="width: 20px"></th>
</tr>
</thead>
<tbody>
<tr>
<td headers="th1" style="width: 20px"></td>
<td headers="th2" style="width: 20px"></td>
</tr>
</tbody>
</table>
</div>
How can I make both the header show and also align correctly with the td columns?
CSS includes more display modes than the commonly used none, inline, inline-block, and block. There are quite a few, in fact.
In this case, it appears what you want to use instead of display:block; is display:table-header-group;.
Here are some examples of the different styles, as applied to your table:
http://jsfiddle.net/CrYdz/1
The problem is caused by the display:block in the style attribute for the thead.
Change it to display:table-header-group
When you want to show the thead element use this value: display: table-header-group;
To set same width for table header and table body in table:
<table style="table-layout:fixed">
In case nothing fixes it. move your <tr> inside thead to tbody.
this was the only solution in my case since i had so many complications already.
Maybe the content of the THs is wider than the content of the TDs and in reality the width is not 20px as set.
So, because you first load the page without the thead, the table gets the width of the TDs. Then, when you display the THEAD by js, the table width continues being the same but probably the THs have different width.
By default, th and td should be aligned. If you want to leave it as default, just put display: unset:
.tablestuff thead {
display: unset;
}
Plain JavaScript:
document.querySelector("thead").style.display = "unset";
jQuery:
To make the jQuery's $(".tablestuff thead").show() method works, your css needs to be defined like this:
.tablestuff thead[style*='display: block'] {
display: unset !important;
}
This is because .show() will set the display to block by default. The above css will set it back to unset whenever it's set to block.
show and hide th instead of thead with the css
/* to hide */
.tablestuff thead th{
display: none;
}
/* to show */
.tablestuff thead th{
display: table-cell;
}
Related
I always use Bootstrap grid classes in thead th tags so I'll no longer need repeating classes on tbody cells. for example:
<table>
<thead>
<tr>
<th class="col-xs-2">#</th>
<th class="col-xs-10">Title</th>
</tr>
</thead>
<tbody>
<tr><td>150</td><td>Long text in here</td></tr>
<tr><td>150</td><td>Long text in here</td></tr>
<tr><td>150</td><td>Long text in here</td></tr>
<tr><td>150</td><td>Long text in here</td></tr>
<tr><td>150</td><td>Long text in here</td></tr>
</tbody>
</table>
Now, I'm implementing a scenario that I should not use table headers. I tried display: none and visibility: hidden on thead but none of them works.
I guess I have following solutions (which are all bad INMHO!):
Add grid classes to each tbody cell (which in my large dynamic table is a bad thing)
Use css to target cells by the index eg: nth-child() which is also bad, because of duplicated CSS rules, and will be a pain in the ass becase table may dynamically change and I'll always need a SCSS compile!
Give thead a 1px height, with no inner text or anything.
Is there a better solution?
Something like this should work:
thead p {
margin: 0;
opacity: 0;
height: 0;
}
Of course the p is just an example, you can do this with any other tag.
Updated Fiddle: https://jsfiddle.net/8brbuy6v/1
Thanks to #Johann Kratzik suggestion, I managed to solve my own problem by hiding thead contents and using height: 0 on thead itself.
thead { opacity: 0; border: 0 none; height: 0; }
thead * { margin: 0; padding: 0; border: 0 none; height: 0px; }
This is more of a "tell me why it doesn't work" instead of "help me fix it" question. If I try to apply padding to a thead or tr element within a table, it doesn't work. The only way padding works is if I apply it directly to the th or td element. Why is this so? Is there an easy way to apply padding to the entire thead or tr or is adding it to the th and td the only option?
<table>
<thead>
<tr>
<th>Destination</th>
<th>Size</th>
<th>Home Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>test 1</td>
<td>test 2</td>
<td>test 3</td>
</tr>
</tbody>
</table>
Notice the 10px of padding on the thead.
table {
width: 100%;
}
thead {
text-align: left;
background-color: yellow;
padding: 10px;
}
http://jsfiddle.net/5VQB7/
http://www.w3.org/TR/CSS2/box.html#propdef-padding
'padding'
Applies to: all elements except table-row-group, table-header-group, table-footer-group, table-row, table-column-group and table-column
Try placing the padding in the th element instead. Typically you want to add padding to the th or td element, depending on the circumstance.
thead th {
padding: 10px;
}
Relevant part of CSS2.1: Tables
Please have a look at this diagram: table layers. padding can only be applied to table as a whole or th and td cells afaik. Not to forget caption also. Other layers are complicated enough in the various table layout algorithms not to have padding applied to them ^^
Here's a fiddle http://jsfiddle.net/QB97d/1/ showing other properties you can play with.
border-spacing: 8px 10px; is like a margin around each cell of a table. Get rid of it with border-collapse: collapse;
table-layout: fixed; will trigger a completely different algorithm ("render widths as I tell you to, don't care about the relative quantity of content in each cell anymore")
border is another way of giving space around elements, around padding
empty-cells: hide may trigger special behavior
Not shown in this fiddle:
playing with selectors to select the 4 corners of a table in IE9+ with a thead element and unknown type of cell in each corner (I'll let you find the 4 edges ;) ):
thead th:first-child, thead td:first-child,
thead th:last-child, thead td:last-child,
tbody:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child
tbody:last-child tr:last-child th:last-child, tbody:last-child tr:last-child td:last-child
box-sizing: border-box (and its vendor prefixes) for calculating cell widths taking into account padding and border widths (like IE6 did in Quirks mode, oh irony...)
Padding between thead and tbody
Unfortunately, padding is not available for thead, tbody nor tr.
Nonetheless, more padding between thead and tbody can be achieved by selecting the data cells of the first row of the table body:
tbody tr:first-child td {
padding-top: 2.5ex;
}
Doing so, preserves the relative position of any header borders.
thead don't support css attribute "padding" if you need apply css in thead then css modify like :
thead tr th {
text-align: left;
background-color: yellow;
padding: 10px;
}
Or
th {
text-align: left;
background-color: yellow;
padding: 10px;
}
paddling left & right would always work for td or th as well.
But, in case of padding-top & padding-bottom, you are asking the td (or th) to increase it's height. Then what about the siblings?? What do you expect to happen??
Hence for padding top or bottom to work, you apply to it's parent which is the row of cells.
because tags like and they are not meant to populate the table, but to contain other elements.
lets make it clear : if you want to add header to your table, you wont insert it in , instead you will add it inside , and the same for , if you want to populate data inside a table, you will need to insert them inside
i hope this answer clarify your question
HTML table ignoring element-style width
I have an HTML table where certain cells have very long text contents.
I want to specify a width (in pixels) for these cells using jQuery, but the rendered table just ignores the given width.
Is there any way to force the table to respect this width?
Thanks!
JSFiddle: http://jsfiddle.net/sangil/6hejy/35/
(If you inspect the cell you can see the the computed width is different than the element-style width)
HTML:
<div id="tblcont" class="tblcont">
<table id="pivot_table">
<tbody>
<tr>
<th id="h0" >product</th>
<th id="h1" >price</th>
<th id="h2" >change</th>
</tr>
<tr>
<!-- this is the cell causing trouble -->
<td id="c00" >Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa</td>
<td id="c01" >3212</td>
<td id="c02" >219</td>
</tr>
<tr>
<td id="c10" >Acer</td>
<td id="c11" >3821</td>
<td id="c12" >206</td>
</tr>
</tbody>
</table>
</div>
CSS:
.tblcont {
overflow: hidden;
width: 500px;
}
table {
table-layout: fixed;
border-collapse: collapse;
overflow-x: scroll;
border-spacing:0;
width: 100%;
}
th, td {
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
}
th {
height: 50px;
}
​Javascript:
$(document).ready(function() {
// THIS LINE HAS NO EFFECT!
$('#c00').width(30);
});​
I can see from your fiddle that you already have a good grasp on how to get the word truncation and such in-place. I think you may find it useful to do something like the following:
<table>
<colgroup>
<col style="width: 30px;" /> <!-- this style affects the whole 1st column -->
<col />
<col />
</colgroup>
<!-- the rest of your table here -->
</table>
This method works with the HTML specification in a way that is compliant - and will resize the whole column. If you instead change the display of the cell to inline-block, as mentioned above, what will happen is that you take the cell out of the table's flow - and other stylistic changes may cease working.
By styling the entire col using the code above, you use the table element's table-layout: fixed styling to your advantage instead.
Additionally - I noticed that you have the cells set up to use text-overflow: ellipsis; Check out this article on quirksmode to understand why it's not working. The fix you need is to make the following edit:
th, td {
border: solid #4682B4 1px;
overflow: hidden;
text-overflow: ellipsis;
word-wrap: break-word;
text-align: center;
white-space: nowrap; /* Add this line */
}
Table cells by default fit to their content and ignore your width.
Other possibility to the already provided answers:
Surround the text with some other container:
<td id="c00" ><div>Acer 2400 aaaaaaaaaaaaaaaaaaaaaaaaaa</div></td>
And change its width:
$('#c00 div').width(30);
You have a few issues:
table-layout: fixed tells the columns to be equal.
Then, even if you take that out, your text is wider than 30 pixels, with no spaces, so it's not going to go narrower than that "aaaaaaaaaa" etc. You'll need to make the text smaller, or add spaces.
Finally, width should be "30px" (in quotes).
Hope that helps.
Try this:
$('#c00').css("width","30px");
or this:
<td id="c00" style='width:30px'>
If you are using IE, you may need to have Compatability Mode on. Also, make sure you are importing the proper jQuery plugin.
How to achieve it with CSS or HTML?
<table class="banner"><tr><td>If you need many results, then post your task as piecework here. You only need to pay qualified results.
</td>
<td>Make money by doing piecework</td></tr>
<tr><td>POST PIECEWORK FOR FREE<br/></td><td></td></tr></table>
You should use the table-layout property here...
table { table-layout: fixed; }
table td { overflow: hidden; }
Use CSS:
td{overflow:hidden;width:200px;}
In CSS, you can use the width property. This can be done inline or as part of a stylesheet. For some more CSS for tables, check out CSS Styling Tables from w3schools.
td {
width:200px;
}
<td style="width:200px;">
Or, in HTML, check out the colgroup tag, like this:
<colgroup>
<col width="200px" />
</colgroup>
I personally use the colgroup the most.
What about:
table { width:100% }
td { width:20% }
(assuming you have 5 td's per row. If you have three, put width 33%, if you have 2 put 50% and so on.
Set the width (CSS or inline if you wish) to be the same percent value for each column (ideally with a total of 100%). This will allow progressive scaling.
You can use the width property for the td selector. However, possibly you want to discriminate one table over the other. In that case, you can classify your 'equal-width' table like this:
<table class="equal_width_columns">
<tr><td>one</td><td>onetwothree</td></tr>
</table>
<table> <!-- just a regular table -->
<tr><td>one</td><td>onetwothree</td></tr>
</table>
with css like this:
table.equal_width_colums * td { width: 300px; }
Was searching for this myself. But in my case, the table count was not fixed, hence giving exact percentage was not an option. Found another solution at
http://freachable.net/2007/11/02/AutomaticEqualWidthColumnsInHTMLTables.aspx
Give the cells a very small width. The cells will scale up to fill the available width.
table tr td { width:5%; }
How can I prevent automatic line breaks in a column of table (not a single cell)?
You can use the CSS style white-space:
white-space: nowrap;
For completion sake:
#table_id td:nth-child(2) {white-space: nowrap;}
Is used for applying a style to the 2 column of the table_id table.
This is supported by all major Browsers, IE started supporting this from IE9 onwards.
Just add
style="white-space:nowrap;"
Example:
<table class="blueTable" style="white-space:nowrap;">
<tr>
<td>My name is good</td>
</tr>
</table>
Use the nowrap style:
<td style="white-space:nowrap;">...</td>
It's CSS!
There are a few ways to do this; none of them are the easy, obvious way.
Applying white-space:nowrap to a <col> won't work; only four CSS properties work on <col> elements - background-color, width, border, and visibility. IE7 and earlier used to support all properties, but that's because they used a strange table model. IE8 now matches everyone else.
So, how do you solve this?
Well, if you can ignore IE (including IE8), you can use the :nth-child() pseudoclass to select particular <td>s from each row. You'd use td:nth-child(2) { white-space:nowrap; }. (This works for this example, but would break if you had any rowspans or colspans involved.)
If you have to support IE, then you've got to go the long way around and apply a class to every <td> that you want to affect. It sucks, but them's the breaks.
In the long run, there are proposals to fix this lack in CSS, so that you can more easily apply styles to all the cells in a column. You'll be able to do something like td:nth-col(2) { white-space:nowrap; } and it would do what you want.
<td style="white-space: nowrap">
The nowrap attribute I believe is deprecated. The above is the preferred way.
<table class="blueTable">
<tr>
<td>My name is good</td>
</tr>
</table>
<style>
table.blueTable td,
table.blueTable th {
white-space: nowrap;
/* non-question related further styling */
border: 1px solid #AAAAAA;
padding: 3px 2px;
text-align: left;
}
</style>
This is an example usage of the white space property with value nowrap, the bluetable is the class of the table, below the table are the CSS styles.
Put non-breaking spaces in your text instead of normal spaces. On Ubuntu I do this with (Compose Key)-space-space.
To apply it to the entire table, you can place it within the table tag:
<table style="white-space:nowrap;">