Geek Answers Handbook

Why the element of the stylized table element without explicit width does not fill the remaining width of the parent in the table / table style?

Can someone explain why the two table layouts below do not match (in particular, why the second "table-cell" div is not stretched to take the rest of the width of the parent div "table", since it is in a real table)?

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head></head> <body> <div style="width: 100%; border: 1px solid black;"> <div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div> <div style="display: table-cell; border: 1px solid red;">.</div> <div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div> </div> <table style="width: 100%; border: 1px solid black; border-spacing: 0;"> <tr> <td style="width: 20px; border: 1px solid red;">.</td> <td style="border: 1px solid red;">.</td> <td style="width: 20px; border: 1px solid red;">.</td> </tr> </table> </body> </html>

Edit: it turns out that you get some unexpected behavior if you try to style the image as a cell table:

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <style type="text/css"><![CDATA[ * {border: 1px solid black;} table, .table, .row { width: 100%; } .table { display: table; } .row { display: table-row; } .cell { display: table-cell; } img { height: 21px; width: 21px; } ]]></style> </head> <body> <div class="table"> <div class="row"> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" class="cell" /> <div class="cell"> </div> <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==" class="cell" /> </div> </div> </body> </html>

The 2nd cell style element does not stretch completely horizontally to fill the rest of the width of the table. If you add content to it, it gradually does so. Weird

+6
source share
3 answers

If the parent of the table-cell element is not an element of the table-table (and its parent element is an element of the table) or a table element, elements of an anonymous table and table are inserted for you. Anonymous elements cannot be issued.

If you want your table cell elements to occupy the entire available width, you need to create an explicit table element to contain them for styling purposes.

http://tinker.io/29b92

  <div style="width: 100%; display: table; border: 1px solid black;"> <div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div> <div style="display: table-cell; border: 1px solid red;">.</div> <div style="display: table-cell; border: 1px solid red; height: 20px; width: 20px;">.</div> </div>
+9
source

It turns out the answer was: “images are not reliably erased like table-cells”, but I incorrectly simplified my initial test case. Thanks everyone!

0
source

You must work with tables inside other tables if you want one of your rows to expand to the same width.

Also, if your parent table is 100%, your child table also cannot be 100%, have you tried 98%?

Create your HTML code and external CSS file to prevent your sentence from repeating on every line.

If this does not work, let me know and I will continue to look for additional options that you can try.

-1
source

More articles:


All Articles