I'm trying to troubleshoot a fairly simple page which has a nested table in it and gives me an unwanted horizontal space for some reason. I removed most of the code until all I'm left with are the tables and the space still exists.
<table>
<tr>
<td>
<table>
<tr>
<td>
a
</td>
</tr>
</table>
</td>
</tr>
</table>
I can get around this using divs but I'm wondering if someone could explain this to me, I feel like I'm missing something very basic here.
jsfiddle - http://jsfiddle.net/jeo3ya9n/
Inspecting the DOM in IE shows me an empty line between the first TD and the table, inspecting in Chrome shows me:
"
"
at the same spot. Deleting those removes the unwanted space but I'm not seeing what causes them in the code.
This is one of many of IE's layout bugs, which are irritating to fix.Few suggestions:
1) Set the containing cell's padding-top to 0em
2) Set the nested table's margin-top to 0em
Related
I am working on a web project that involves a simple HTML table. The elements in the table display fine and all when the page is wide enough, but when the page is too narrow to display the elements on the same line, the overflow jumps to the next line, but below the table header, which is too far left from the start of the element. This also happens when line breaks are introduced. I want to be able to stop this from happening and keep the multi-line elements in a sort of fixed box where the line breaks don't ignore rules defined in the css properties, but without completely reworking the table. Please help make this happen. I have provided an example of this below.
Markup:
<table class="rwd-table">
<tr>
<td data-th="Column 1"><span>Example 1</span></td>
<td data-th="Column 2"><span>Hello World</span></td>
<td data-th="Column 3"><span>I am a long span element. </span></td>
<td data-th="Column 4"><span>I am an even longer span element in this table. New lines will jump to the very left of the table when the page is small enough.</span>
<td data-th="Column 5"><span>I am a long span element too.<br>I am also bugged :(</span></td>
<td data-th="Column 6"><span>1234567890</span></td>
</table>
A working example: https://codepen.io/Spotlightsrule/pen/EXoJdB
I've got a problem with div spacing in responsive design if you go to this url: http://www.false-idolz.com/mobile.html you'll se how when you decrease to the maximum de window width the div spacing gets bigger instead of smaller... why does it happen? how do i fix it? Thanks!
<table>
<div>
<tr>
<td>
......texto.........
</td>
</tr>
</div>
<div>
<tr>
<td>
......texto.........
</td>
</tr>
</div>
</table>
This is the example of the code I am using everything works but spacing
Transferred from comments as this proved to be the answer
Inspecting the source code reveals that you have got tables within tables - not only is this bad practice, but it will also cause many problems and I suspect that this is one of them. Honestly, I think there is far too much for us to change in order to get your code working as intended. Please redesign your layout, without using tables within tables, then we if you still have difficulty come back to us.
What I am doing seems to work on firefox and IE but not safari.
I have something like this
<table>
<thead>
<tr>
<th style="display: none;">hi</th>
</tr>
</thead>
<tr class="someClass">
<td style="display: none;"><span>hi</span></td>
</tr>
Now imagine I have many columns and rows and many headers. Now in all browsers this coulmn would be hidden. In safari it makes some gap and then all the other columns are out of alignment.
http://gyazo.com/ef5ce5e994abb954aab7069b14699476.png
this is how my column headers look like. Am I missing something?
Setting display:none on an element takes it out of the document flow, but that doesn't always work well with table cells as they are not independent of the surrounding elements.
You would have to actually remove the elements from the table rather than hiding them to make the table realign itself with the remaining elements.
I think I figured it out. I just put that column last(and the header last as well). Now it seems to look proper.
I have been using the page-break-after command to break an html report after each "grouping". My problem is it is now leaving my table floating in the middle of the page. Each page is different where it puts the table, sometimes at the top of the page, sometimes in the middle and sometimes at the bottom. There is quite a bit of complexity in the HTML so I decided to take an image instead:
I will try to sum up the html
<body>
<table>
<thead>
{this is top bold box on each page}
</thead>
<tr>
<td>
<table> {this is the results table}
<thead>
{this is the headers of the "floating" results table}
</thead>
{tr's of data here}
</table>
</td>
</tr>
</table>
</body>
we are using display:table-header-group to get the table headers to show up on each page. Can you help me figure out what I need to do to get those tables to be at the top of the page? (this is in IE8)
Impossible to tell from the information provided. Obviously, a CSS issue but can't tell where to begin. Common problems are the display CSS not completely accounted for in the print CSS and, using display:none; on an child element inside of a div tag that has height defined (removes the content but the space is still there.) The latter is what I suspect. I've found adding background colors to various elements very helpful in debugging CSS problems such as yours.
I would like to ask what is the better way of specifying HTML column width? the width attribute or the style attribute? Assuming I am using IE 6. Does IE render the width attribute better than style?
By width attribute
<table width="900">
<tr>
<td width="450">A</td>
<td colspan="2" width="450">B&C</td>
</tr>
....
</table>
OR by style attribute
<table style="width:900px;">
<tr>
<td style="width: 450px;">A</td>
<td colspan="2" style="width: 450px;">B&C</td>
</tr>
....
</table>
Firstly before I answer your question, something you should know is how tables are rendered, experiment with the table-layout fixed style for the table element:
If the browser knows the width of the first table row columns upfront (if you provide the table layout fixed style on the table) the browser can begin rendering the top of the table even before its calculated the width of any resulting rows. What this means? Tables populated by Ajax calls with a fixed layout can begin displaying results to a user before the full ajax call is finished. Best way to think of this is like a progressive jpg. In the end your pages will appear to load faster.
table
{
table-layout:fixed;
}
Now to answer your question.
Actually neither example you provided is correct. you typically do not set width on a cell that is spanned across 2 or more cells. In any table its a good idea to create at least 1 row with all the cells, this can either be in the TH or (just the way I like to do it in a blank tr.
For example...
<table>
<tr>
<td width="450"></td>
<td width="225"></td>
<td width="225"></td>
</tr>
<tr>
<td>content here</td>
<td colspan="2">content here</td>
</tr>
</table>
What ever way you decide to use style or just standard html width, the choice is yours, but in the end you should have your first row (if table layout is fixed) or any row (if table layout is not fixed) to contain the width definition for each invidivual cell. This will also help you with planning the correct looking table, hope this helps.
Test the table layout fixed, by creating a huge like 10 000 row table, and test the rendering speed vs a non fixed table layout.
The whole debate about HTML 4 vs XHTML , style vs attributes I think is really a question of maintainability. I don't think there is anything wrong setting the width using Style or plain width with HTML 4 transitional, they both do the same thing. The reason why you can do both is because HTML has evolved a bit, yes it can get messy! Good luck
Just add <div> tag inside <td> or <th> define width inside <div>. This will help you. Nothing else works.
eg.
<td><div style="width: 50px" >...............</div></td>