Table-cell - some colspan?

Question

I'm a little puzzled right now because I had CSS code that worked, but it was not at all pretty. Now I want to recycle these CSS styles and create them through LESS. And I have big problems with display:table; / display:table-row; and display:table-cell; .

For example, I have the following code: http://jsfiddle.net/La3kd/2/

How can I do this so that the last cell (center) does not move the second cell to the right? The last cell should have a width of 2 cells above. Some colspan is required. This is so weird because I got the impression that it worked before I reworked the code. But now all the elements on the right are completely shifted.

Answer 1

CSS has no colspan counterpart. Based on your example, you can simply mark your last line as a separate block with no possibility.

You can also use display: table-caption in combination with caption-side: bottom to display the table row as the last "row" that spans all columns. Watch a live demo .

Answer 2

One idea would be to use absolute positioning. The relative location of the wrapper around the table, then all absolute positioning becomes coordinate with respect to the wrapper. See below. Notice that I define the tableWrapper class, which will be set by the position: relative, then the tableRow class will define and - I assume that you set. TableRow div {display: table-cell; }, so I did not put a class on each div. You will need to find a way to prevent it from overlapping the div below it if the height becomes greater than the 2nd div. Must be very doable.

 <div class="tableWrapper"> <div class="tableRow"> <div>Column 1</div> <div>Column 2</div> </div> <div class="tableRow"> <div style="border: 1px solid black; position: absolute; width: 100%;">appears like colspan=2</div> <div>&nbsp; (only here to force a row break before the next table row)</div> </div> <div class="tableRow"> <div>Column 1</div> <div>Column 2</div> </div> </div> 

Answer 3

I found a solution using jquery and table-layout: fixed . Here is my fiddle: http://jsfiddle.net/emilianolch/5nvxv5ko/

HTML:

 <div class="table"> <div class="table-row"> <div class="table-cell"> top left cell </div> <div class="table-cell"> top right cell </div> </div> <div class="table-row"> <div class="table-cell colspan"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> <div class="table-row"> <div class="table-cell"> bottom left cell </div> <div class="table-cell"> bottom right cell </div> </div> </div> 

CSS

 .table { display: table; table-layout: fixed; width: 100%; border-collapse: collapse; } .table-row { display: table-row; border-collapse: collapse; } .table-cell { display: table-cell; padding: 5px; border: 1px solid black; } .table-cell.colspan { display: none; /* collapse border */ margin-top: -1px; margin-bottom: -1px; } 

JS:

 var rowWidth = $('.table-row:first').width(); var colWidth = $('.table-cell:first').width(); var marginRight = colWidth - rowWidth + 11; $('.table-cell.colspan').css('margin-right', marginRight + 'px').show() 

Answer 4

Use a real table when you are forced to do this to get your desired layout.

The only reason not to use the table for layout is because the talking browser for the blind gives line numbers and column number coordinates for each cell in the table. This confuses the blind reader when table cells are used for layout.

Of course, it’s much more convenient to use margins, borders and indents where they do the job much better than sticking them to tables, but when you have something with a layout similar to that written on the newspaper’s classifieds page, it’s better to use the real a table, a set of nested tables, or a table full of divs.

I will always use a div or div, gluing a table with parts of the display table when they work.

When they do not work or when the div layout falls apart at different screen resolutions, I will use a real table. He never falls apart.

This kludgery W3C would have a better CSS solution to prevent the talking browser from treating the real table as a table.

I also view the comment table located around the page title as tabular data, even if it is not numeric. Tabular data may include categorical data.

One idea is to hide the disclaimer (with the same foreground and background colors) by telling the blind to ignore the coordinates of the table that the browser provides for the conversation, because the use of the table was caused by a lack of ability to work with the diva layout.

Answer 5

Depending on your needs, a flexbox layout can do what you are looking for.

 div.table{ display:block; width:100%; } div.table >div{ display:flex; width:100%; border:1px solid gray; flex-direction:horizonal; } div.table > div >div{ display: block; flex-grow:1; border-bottom:1px solid #ddd; vertical-align: middle; height:30px; padding:4px; } 

See demo:

http://jsbin.com/mimegodiba/edit?html,css,output

Answer 6

A table heading is a good idea if you need a header and footer row, regardless of column width ... Absolute positioning works fine unless your text feeds a line at least once more than the other cells on that row. ..

So, here the pseudo-solution should have a header between the rows of the reacting table and be sure that the row-by-row matches the contents of the table header (which is important if the table is populated dynamically). I also included the colspan sort (although not linear):

CSS:

 .table { display:table; position:relative; } .table > .header { display:table-caption; position:absolute; left:0; right:0; } .table > .l50{right:50%;} .table > .r50{left:50%;} .table > .row{display:table-row;} .table > .row > *{display:table-cell;} /* We add an extra cell where neededed to allow or header repositioning using % instead of fixed units */ .table > .header + .row > :last-child { width:1%; max-width:1px; overflow:hidden; visibility:hidden; } .table > .header + .row > :last-child > div { float:left; display:inline; visibility:hidden; width:10000%;/* 100% = parent element width (1%) ⇒ 100*100% = gran-parent element width*/ } .table > .header + .row > :last-child > div > .l50 .table > .header + .row > :last-child > div > .r50{width:5000%;} /* No responsive line-feed thought it possible using % to estimate the size the span should take but it not accurate (see HTML render) */ .table > .row > div > .span{position:absolute;left:0;right:33%;} /* THIS MAKES SURE TRADITIONAL CELLS ARE VISIBLE */ .table > .row > .top { position:relative; z-index:1; } 

http://jsfiddle.net/sp2U4/

Answer 7

CSS3 has a column-span attribute . But please try using flexbox or css grid for layout.