After a couple of days spent struggling with HTML tables, my forehead has a grid of indents which incidentally are a mirror copy of my keyboard.
Speaking of grids, I'd like to know if there's any set of rules regarding <td> size.
Is it all according to the content? Is it affected by other cells in the same row? By the row itself? By the table? Plain ol' CSS?
NOTE: I'm specifically not looking for an answer to a specific question.
I just want to know how the darned height is calculated so I can figure out myself each time what to expect.
Yes table cells follows the content and it's siblings height.
You can say that it's a rectangle split in section, that no matter what it's inside it will always stay as a rectangle.
So even if you add a css height it will ignore it if the text is bigger than the css height.
So pretty much you can expect a dynamic height in most case scenarios.
But still...it should be used to show only tabular data and nothing else. For the rest there is display:table-cell;...
Here is a FIDDLE that you can play with.
Row styling doesn't work in this setting.
first td row: standard
second td row: given a height - note it affects the entire row
third td row: given padding, again affects entire row
fourth td row: given a large font
fifth td row: given large font and padding
CSS
table td {
border: 1px solid black;
}
table tr:nth-child(2) td {
height: 50px;
}
table tr:nth-child(3) td:first-child {
padding: 10px;
}
table tr:nth-child(4) td:first-child{
font-size: 34px;
}
table tr:nth-child(5) td:first-child{
font-size: 34px;
padding: 10px;
}
PS - Use tables only for "TABULAR" data.
Related
i have a huge table (about 2000 rows with 60 cols) and on each cell is a title.
The title on empty cells is about 40 Bytes Long.
So the created webpage is huge. I wand to decrease the size of the webpage.
As I can's set a title in a class, I tried to solve it with pseudo elements.
See my fiddle here
"info" is my tooltip/"title" Attribute
first table:
<td><span info>Content</span></td>
second table:
<td info>Content</td>
In the second table is a gap between the cells. Why?
You set [info] to display: inline-block;. It's fine for spans but when you put info attribute on TD, this of course messes up table layout, because TD must have display: table-cell.
Move inline-block to span[info] only if you want it to be there:
[info] {
position: relative;
cursor: help;
padding: 4px;
}
span[info] {
display: inline-block;
}
Demo: http://jsfiddle.net/gL30qujr/3/
i need to create a table with the first column fixed and the rest of the columns scrollable horizontally.
I managed to implement this successfully BUT when i implement it in my website it doesn't seem to be working.
when i make the table head fixed, the first column breaks the layout
when i use this with a plain table it works but not with my theme
.table-wrapper th:first-child {
position: fixed;
left: 5px
}
Table which works without the css : http://www.vidznet.com/table/2.html
Table with css : http://www.vidznet.com/table/1.htm
can someone tell me what might be conflicting?
Update:
what i need is the first column to be fixed and the scrollbar to start from the second column like this
It should be like this: http://vidznet.com/table/table1.jpg
but in my css theme it looks like this http://vidznet.com/table/table2.jpg
The problem is with your CSS property:
.table.table-striped > thead:first-child > tr > th:first-child {
width: 25%;
text-align: left;
}
The width is too large for the column. It needs to be changed to 5 to 12%, depending on how you want how far you want the underline to go, to fit in with the other fixed elements.
I have some HTML tables generated by a program I wrote. I had the width attribute set on all the cells in the first column because I wanted it to stay a specific width. In one of the files, however, it wasn't wide enough, so I figured it was because of a really long entry causing it to shrink to accommodate it. So I changed it to min-width. But now the whole table is expanding past the edge of the screen. What I want to do is have the first column fixed at 80 points wide, but the other two columns to be sized automatically based on their contents. But I don't want the table to be wide enough that you have to scroll horizontally to see the whole thing. Vertically is fine of course, for obvious reasons.
Here's the CSS I'm using (td.time refers to the table cells in the leftmost column, the one fixed at 80 points):
table { border:none; }
tr:nth-child(odd) { background-color:#eeeeee; }
tr:nth-child(even) { background-color:white; }
td { padding:0; margin:0; }
td.stricken { text-decoration:line-through; color:gray; }
td.time { font-family:'Courier New', monospace; font-size:10pt; width:80pt; }
And here's a link to the HTML file that uses that style sheet and has the problem: http://norton1.dyndns.org/tppupdates/heartgold.html.
For those who are wondering, it's a list of everything posted to the Twitch Plays Pokémon HeartGold live updater on Reddit.
I found you problem. It's one of the dummies writing that they "dropped a whole bag of doritos." Scroll down to 6/02/2014 12:32:35AM. That line right there is causing your problems.
Add this to your CSS
table tr td div p {
word-break: break-word;
}
This will break entire words and links and make them not push the table out.
I have a strange problem that I'm actually ashamed to admit. See the whole thing here:
http://jsfiddle.net/Sorcy/ng2by/1/
My problem is: the second (very small) table should actually stretch the whole width of the container. When I look at it with firebug it does (therefore the blue box to the right, which is actually the background color of the table), but the rows themselves only stretch as far as they have to to accommodate the content.
Since I don't want a big blue box beside my tables, how do I get this thing to stretch the whole width? No amount of setting width for tablerows has brought me anything, and since I can not know beforehand how many columns my table is gonna have, setting a width for the cells is also out of the question.
Only solution I have so far is writing a small Javascript that goes through the tables, counts the columns and sets the width of each on the fly, but of course I'd like a pure CSS solution much better.
Edit:
As requested, an image of how it is supposed to look:
Direct link for bigger image
I believe the main problem is this:
table {
display: block;
}
If you change the display property for tables, you are basically asking the browser to ignore it's a table and handle it as a regular element, thus leading to unpredictable quirks.
I don't know what you were trying to accomplish but it's possible that you really wanted this:
table {
border-collapse: collapse;
}
This attribute makes it easier to accomplish certain visual designs.
Update #1: A dark line after the last row of the table can be done with this simple style:
table {
/*background-color: #001F66;*/
border-bottom: 1px solid #001F66;
}
Update #2: To get a dark line after the cells of the last row replace this:
table tr:last-child td { border-bottom: none; }
... with this:
table tr:last-child td { border-bottom: 1px solid #001F66; }
On our site we have tables containing data. We like the column widths we get with a normal table, but we like the border-bottom of tds to stretch the entire width of the page like we get with CSS: table { width:100% }, as can be seen on a demo table widths page, which renders like this:
Is it possible to achieve the same column widths as with a normal (non-width-100%) table in a table where the border-bottom stretches the entire width?
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
We need a solution that works in at least IE6-8 + FF.
Btw, is there a better way (tm) of showing HTML snippets than linking to an external page? I can show just source, but having HTML rendered too is very illustrative.
This was originally posted on Webmasters, but following a suggestion there, I now (re)post it here.
I finally figured it out.
My first few attempts dealt with floating <td>s and <tr>s, but apparently I was on the right track but had the wrong element.
I think what you want to do is to float the <tbody>. The <table> will still be 100% width, so it will stretch the whole width of the page, but the <tbody> inside of it will act as a container for everything else, and floating it will release it from the shackles of the size of its <table> container width.
The downside of this is that you won't be able to use <thead> or <tfoot> elements, because you will no longer have any way to align them with the <tbody> content.
Try this out:
table {
width: 100%;
border: 1px #000 solid;
}
tbody {
float: left;
}
td {
border: 1px #000 solid;
}
You can use the new CSS properties min-width and max-width to bound the columns sizes without setting them explicitly.
To get a proportional version of what would be rendered when the table's width is not specified, I think you'd have to let it render normally (remove your table width setting) and then use javascript to read the column widths and resize.
Pulled this example of using jQuery to syncronize the column widths of two tables from another question:
$("#t1").width($("#t2").width());
$("#t1 tr td").each(function (i){
$(this).width($($("#t2 tr:first td")[i]).width());
})
Should be a pretty good starting point for scaling your column widths.
This is pretty ugly and not exactly what you asked for, but it works in Firefox and appears to get the same gist...
<html>
<head>
<style type="text/css">
td{background-color:blue;}
div{border:1px solid red;position:absolute;width:100%;}
</style>
</head>
<body>
<table>
<tr>
<td>asdf<div></div></td><td>hello blah blah</td>
</tr>
<tr>
<td>lorem ipsum dolor si amet</td><td>testing</td>
</tr>
</body>
</html>
I was looking for a similar answer to this question, however I don't understand what you mean by
And no, td { white-space: nowrap } in combination with an extra width: 100% td (see the link above) is not good, as sometimes the tds are long and so we want the tds to wrap exactly like in a normal table.
But anyway, I found a solution to my problem. Not sure if it can be used here, but it solved my problem. Maybe it can be helpful to others.
I didn't add in another td. I just applied 100% to every last td with content.
So I could add a class to every last td to do that, or I could use the last-child selector to do it for me.
Something like:
table
{
width:auto;
}
table tr td:last-child
{
width:100%;
}