CSS 表格单元格 - 某种 colspan？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9851582/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
table-cell - some kind of colspan?
提问by Torben
I am a bit puzzled right now, because I had CSS code that worked, but it wasn't beautiful at all. I now want to rework this CSS styles and build them via LESS. And I have big problems with display:table;/ display:table-row;and display:table-cell;.
我现在有点困惑，因为我有有效的 CSS 代码，但它一点也不漂亮。我现在想重新设计这个 CSS 样式并通过 LESS 构建它们。我在display:table;/display:table-row;和display:table-cell;.
For example I have the following code: http://jsfiddle.net/La3kd/2/
例如我有以下代码：http: //jsfiddle.net/La3kd/2/
How can I do it that the last cell (center) does not shift the above second cell to the right? The last cell should have the width of the 2 cells above. Some kind of colspan is needed. It is so weird, because I have the impression that it worked before I reworked the code. But now all elements to the right are totally shifted.
我怎样才能做到最后一个单元格（中心）不会将上面的第二个单元格向右移动？最后一个单元格的宽度应与上面 2 个单元格的宽度相同。需要某种 colspan。这太奇怪了，因为在我重新编写代码之前，我的印象是它可以工作。但是现在右边的所有元素都完全移动了。
回答by Marat Tanalin
CSS has no colspananalog. Based on your example, you can just mark up your last row as a separate nontably block.
CSS没有colspan模拟。根据您的示例，您可以将最后一行标记为单独的非表块。
You could also use display: table-captionin conjunction with caption-side: bottomto display the table row as a last “row” that spans all columns. See live demo.
您还可以display: table-caption结合使用caption-side: bottom将表格行显示为跨越所有列的最后一个“行”。见现场演示。
回答by midimagic
Use a real table when you are forced to do so to get the layout you want.
当您被迫这样做以获得所需的布局时，请使用真实的表格。
The ONLY necessary reason to not use a table for layout is that a speaking browser for the blind gives the row number and column number coordinates of each table cell. This confuses the blind reader when table cells are used for layout.
不使用表格进行布局的唯一必要原因是盲人的语音浏览器会给出每个表格单元格的行号和列号坐标。当表格单元用于布局时，这会使盲人读者感到困惑。
Of course, it is much easier to use margins, borders, and padding where they do the job much better than faking them with tables, but when you have something with a layout similar to a newspaper want-ad page, it is better to use a real table, a set of nested tables, or a table full of divs.
当然，使用边距、边框和内边距比用表格伪造它们要好得多，但是当您有布局类似于报纸通缉广告页面的内容时，最好使用它们一个真正的表、一组嵌套表或一个充满 div 的表。
I will always use div or div faking a table with display table parts when they work.
当它们工作时，我将始终使用 div 或 div 伪造带有显示表部件的表。
When they do not work, or when the div layout falls apart at different screen resolutions, I will use a real table. It never falls apart.
当它们不起作用时，或者当 div 布局在不同的屏幕分辨率下分崩离析时，我将使用真实的表格。它永远不会分崩离析。
This kludgery by the W3C would have had a better solution with a CSS code to tell the speaking browser to not treat a real table as a table.
W3C 的这种混乱本来会有更好的解决方案，使用 CSS 代码告诉正在朗读的浏览器不要将真实的表格视为表格。
I also treat a table of comments arranged around the page title as tabular data, even though it is not numeric. Tabular data can include categorical data.
我还将围绕页面标题排列的评论表视为表格数据，即使它不是数字。表格数据可以包括分类数据。
One idea is to hide (with same foreground and background colors) a disclaimer telling the blind person to ignore the table coordinates the speaking browser provides because the use of a table was forced by the lack of ability to make the layout work with divs.
一个想法是隐藏（使用相同的前景色和背景色）一个免责声明，告诉盲人忽略说话的浏览器提供的表格坐标，因为表格的使用是由于缺乏使布局与 div 一起工作的能力而被迫使用的。
回答by user3413723
Depending on your needs, flexbox layout may accomplish what you are looking for.
根据您的需要，flexbox 布局可能会完成您正在寻找的内容。
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:
见演示：
回答by Jim Brashear
One idea would be to leverage absolute positioning. Relative position a wrapper around the table, then all absolute positioning becomes coordinate centric to the wrapper. See below. Notice I define a class of tableWrapper which will be set position:relative, then define class of tableRow and - I'm assuming you'll set .tableRow div { display: table-cell; } so I didn't bother putting a class on each div. You'll have to find a way to prevent it from overlapping the div below it if it's height gets larger than the 2nd div. Should be very doable.
一种想法是利用绝对定位。围绕桌子相对定位一个包装器，然后所有绝对定位都变成以包装器为中心的坐标。见下文。请注意，我定义了一个 tableWrapper 类，该类将设置为 position:relative，然后定义 tableRow 类并且 - 我假设您将设置 .tableRow div { display: table-cell; 所以我没有费心在每个 div 上放置一个类。如果它的高度大于第二个 div，您必须找到一种方法来防止它与下面的 div 重叠。应该是非常可行的。
<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> (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>
回答by llange
The table-caption is a good idea if you need header and footer row regardless of columns width... The absolute positioning works great except when your text is line-feeding at least once more than other cells in that row...
如果无论列宽如何都需要页眉和页脚行，则表格标题是一个好主意......绝对定位效果很好，除非你的文本比该行中的其他单元格至少换行一次......
So here's a pseudo solution to have header in between rows of a responsive table and be sure to have line-feed according to the table header content (which is important if the table is populated dynamically). I've also included a sort of colspan as well (although not line-feeding accurately) :
所以这里有一个伪解决方案，在响应表的行之间设置标题，并确保根据表标题内容进行换行（如果表是动态填充的，这很重要）。我还包括了一种 colspan 以及（虽然不是准确的换行）：
CSS :
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's possible using % to estimate the size the span should take but it's 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;
}
回答by emilianolch
I found a solution using jquery and table-layout: fixed. Here is my fiddle: http://jsfiddle.net/emilianolch/5nvxv5ko/
我找到了一个使用 jquery 和table-layout: fixed. 这是我的小提琴：http: //jsfiddle.net/emilianolch/5nvxv5ko/
HTML:
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:
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:
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()
回答by Ahmed Ahmed
I could achieve the col-span with the table-row-group
我可以使用 table-row-group 实现 col-span
div {
border: solid 1px;
min-width: 10px;
min-height: 10px;
}
.table-head {
display: table-row;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
.table-row-group {
display: table-row-group;
}
.table-cell-group {
display: table-row;
}<div style="display: table;">
<div class="table-head">
<div class="table-cell">h1</div>
<div class="table-cell">h2</div>
</div>
<div class="table-row">
<div class="table-cell">c1</div>
<div class="table-cell">c2</div>
</div>
<div class="table-row-group">
<div class="table-cell-group">
cc
</div>
</div>
<div class="table-row">
<div class="table-cell">c1</div>
<div class="table-cell">c2</div>
</div>
<div class="table-row">
<div class="table-cell">c1</div>
<div class="table-cell"></div>
</div>
</div>回答by fabb
CSS3 has a column-spanattribute. But please try to use flexbox or css grid for layout.
CSS3 有一个column-span属性。但请尽量使用 flexbox 或 css grid 进行布局。
