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/
Related
I need to hide row in html table. But I can't use property display: none.
Reason - we use tablesorter plugin with widgets staticRow and scroller and when we hide rows with display: none we have troubles with incorrect width in header and in table cells.
We discovered that problem is in display: none. We tried to use set from several properties for hiding rows
tr.hide, tr.hide td {
visibility: hidden;
height: 0;
line-height: 0;
font-size: 0;
padding 0;
}
But this row still have height (not so big as in other cells in table, but still have).
I added 2 examples to jsfiddle (first - with class, which I add above, second - with display:none), you can see difference.
UPD: I added
box-sizing: border-box;
And allmost solved my problem, but still exists 1-2 pixels instead of empty row.
UPD2: border-spacing: 0 for table remove this extra spacing
I am not sure if that's what you want, but you can add the attribute cellspacing="0" for the table. With css you can use.
#second_table { border-spacing:0;}
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.
I have a year calendar that shows just the way I want on normal browsers, but in responsive browser I want it to show all the months below each other, due to layout problems.
I know how to apply code to responsive browser - this is not what I am asking about.
I tried giving the td's the value of display:table-row, and its giving me almost the desired result .. it keeps pushing the rows to left and wont accept width:100% value, that's the problem.
Here is a link to the website I am working with www.5eren.dk
you need to set display:table on <tr> and set display:table-row on <td>. use this CSS:
.year-view>table>tbody>tr {
display: table;
width: 100%;
}
.year-view>table>tbody>tr>td {
display: table-row;
}
I'm building a personal website and I would like a tab-like (as used word processors) effect for projects and their respective descriptions. Example display:
ReallyLong NameProject Project1 Description
FooBar Project Project2 Description
I've tried a table solution with cell spacing of 10px but I didn't want spacing on all sides, just to the right. I haven't seen any css examples where cell spacing was only applied to the right side. Is it possible?
I've also tried this in the css file(it had no effect):
table {
padding-right: 10px;
}
Thanks in advance for any insight.
Instead of styling the table with padding, which should do nothing, try applying it to the td elements in the table like this:
table td {
padding-right: 10px;
}
Try applying the padding to the td element, and not the whole table element.
sir when i insert a long string data the table size comes out of the page as show below.
http://lh3.ggpht.com/_Um0yFxPtzJ8/S0G8dGp1EcI/AAAAAAAAACc/JOJGrM0U-dI/s800/untitled.JPG http://lh3.ggpht.com/_Um0yFxPtzJ8/S0G8dGp1EcI/AAAAAAAAACc/JOJGrM0U-dI/s800/untitled.JPG
should i userd table-layout:fixed;word-wrap:break-word;
as:
table { border-width:1 px; background-color: #ffffff; border-right-color: #828DAF; border-bottom-color: #828DAF; border-top-color:#828DAF; border-left-color: #828DAF; table-layout:fixed; word-wrap:break-word; }
but its nt working???
try this css
table-layout:fixed;word-wrap:break-word;
My suggestion would be to reduce your font size or add a div around your table and add overflow: auto; to it ... so an horizontal scroll bar appears when you have too much content in your table.
As Tommy said, you want to use "table-layout: fixed" in the CSS for your table.
Then you have at least three choices for what to do with table cells that have too much content:
Do nothing - they'll keep going outside their cell.
word-wrap:break-word will break in the middle of a word
overflow:hidden (on the TD, not the TABLE) will cause the rest of the text to be hidden; the user can expose more by making the window wider or decreasing the font size.