CSS中的HTML colspan


251

我正在尝试构建类似于以下内容的布局:

+---+---+---+
|   |   |   |
+---+---+---+
|           |
+-----------+

底部填充上一行的空间。

如果这是一个实际的表,则可以使用轻松地完成此操作<td colspan="3">,但是由于我只是在创建类似表的布局,因此无法使用<table>标签。使用CSS可以吗?


8
最佳解决方案实际上取决于所要解决的问题。如果是数据(属于表中的数据),则使用表。如果您使用表格来控制页面的布局,那么下面的HTML + CSS解决方案之一会更好。
mwcz

为这两种情况添加标记,然后使用Media查询CSS类一次仅显示一种标记。
DigitalDesignDj 2014年

2
忘了CSS。如果显示表格数据,您肯定会知道它将跨越多少列。使用colspan属性
Tihomir Mitkov

我会通过引导程序或引导程序中的自定义网格来执行此操作
Arun Prasad ES

如果您使用的是CSS3,则可以使用columnSpan。与<td colspan =“#”>不同,您没有设置列数的选项,但是可以跨越所有列。 w3schools.com/cssref/css3_pr_column-span.asp
MistyDawn

Answers:


407

没有简单,优雅的CSS类似物colspan

搜索此问题将返回各种解决方案,其中包括多种选择,包括绝对定位,调整大小以及类似的针对浏览器和具体情况的警告。阅读并根据发现的内容做出最明智的决定。


10
表是结构元素,仅因为使用colspan更改了它的外观并不意味着它不是。CSS用于样式元素,而不更改结构。W3C在这里讨论表结构: w3.org/TR/html401/struct/tables.html#h-11.2
Rob

88
Rob,了解您的立场,但是查看W3C建议-特别是与整个表范例有关的建议-您会发现,他们的考虑部分很可能是表的表示。我认为桌子纯粹被认为是结构的想法是当代小说,我认为我们所有人都应该更好地停止传播。关键是我们需要停止对表格的教条。我说它们总是表示形式是错误的,而您说它们总是结构形式也是错误的。现实根本不是那么干。
大卫2010年

4
看来您的答案受欢迎的答案。:)我很高兴得知反表格教条(我已经购买了)过于严格。我只在我仍然认为colspan是适合该工作的工具的范围内支持我的回答。我的回答是正确的75%,而您的回答是100%正确。您应该回到SO。
mwcz 2012年

71
2年后,我在Google上搜索并想投票给作者,但它说“不能投票给自己的帖子”,我意识到是我,哈哈。我决定将接受的解决方案更改为此解决方案,因为我认为它具有更好的信息。

14
这是一篇有关其他(未指定)答案的小文章,而不是所提问题的答案。
Jukka K. Korpela 2014年

56

据我所知,css中没有colspan,但是column-span在不久的将来会有多列布局,但是由于它只是CSS3中的草稿,因此您可以在此处进行检查。无论如何,您都可以使用divspan与类似表格的显示一起解决此问题。

这将是HTML:

<div class="table">
  <div class="row">
    <span class="cell red first"></span>
    <span class="cell blue fill"></span>
    <span class="cell green last"></span>
  </div>
</div>
<div class="table">
  <div class="row">
    <span class="cell black"></span>
  </div>
</div>

这将是CSS:

  /* this is to reproduce table-like structure
     for the sake of table-less layout. */
  .table { display:table; table-layout:fixed; width:100px; }
  .row { display:table-row; height:10px; }
  .cell { display:table-cell; }

  /* this is where the colspan tricks works. */
  span { width:100%; }

  /* below is for visual recognition test purposes only. */
  .red { background:red; }
  .blue { background:blue; }
  .green { background:green; }
  .black { background:black; }

  /* this is the benefit of using table display, it is able 
     to set the width of it's child object to fill the rest of 
     the parent width as in table */
  .first { width: 20px; }
  .last { width: 30px; }
  .fill { width: 100%; }

使用此技巧的唯一原因是要获得table-layout行为的好处,如果仅将div和span宽度设置为一定百分比而不能满足我们的设计要求,那么我将大量使用它。

但是,如果您不需要从这种table-layout行为中受益,那么杜里莱的答案就足够适合您了。


4
是的,但有一点解决方法:.span { ...应该不是span { ...
Slavik Meltser 2012年

2
使用div标签显示表格数据与使用tables控制页面布局一样糟糕
Tihomir Mitkov

1
@TichomirMitkov取决于您是否使用响应式设计来更改布局-在这种情况下,有时可以很好地工作。
Simon_Weaver '16

4
这实际上并不能回答问题,因为在给出的示例中,您基本上有两个表。(即“ div”类的“表格”类)

21

另一个建议是使用flexbox而不是完全使用表。这当然是一种“现代浏览器”,但是现在是2016年;)

至少对于如今寻求答案的人来说,这可能是一种替代解决方案,因为原始帖子来自2010年。

这是一个很好的指南:https : //css-tricks.com/snippets/css/a-guide-to-flexbox/

.table {
  border: 1px solid red;
  padding: 2px;
  max-width: 300px;
  display: flex;
  flex-flow: row wrap;
}
.table-cell {
  border: 1px solid blue;
  flex: 1 30%;
}
.colspan-3 {
  border: 1px solid green;
  flex: 1 100%;
}
<div class="table">
  <div class="table-cell">
    row 1 - cell 1
  </div>
  <div class="table-cell">
    row 1 - cell 2
  </div>
  <div class="table-cell">
    row 1 - cell 3
  </div>
  <div class="table-cell colspan-3">
    row 2 - cell 1 (spans 3 columns)
  </div>
</div>


8
<div style="width: 100%;">
    <div style="float: left; width: 33%;">Row 1 - Cell 1</div>
    <div style="float: left; width: 34%;">Row 1 - Cell 2</div>
    <div style="float: left; width: 33%;">Row 1 - Cell 3</div>
</div>
<div style="clear: left; width: 100%;">
Row 2 - Cell 1
</div>

我不知道细胞的宽度。

1
然后不要放宽。没关系。但是,如果您希望它们跨越相同的宽度,则两个主要的div需要具有相同的宽度。
达斯汀·莱恩

1
您可以使用width:calc(100%/ 3),这比将中间的值增加1%效果更好
ii iml0sto1

5

这不是CSS范围的一部分。 colspan描述页面内容的结构,或给表中的数据赋予某种意义,这就是HTML的工作。


OP明确提到“创建表式布局 ”,没有结构含义。这不是CSS表的目的吗?没有客观理由将colspan属性与整个表区别对待,如果存在仅设计CSS表格元素,为什么不使用仅设计CSS colspan属性…
Skippy le Grand Gourou 16-4-25

2
查看此问题的投票最多的答案。您的观点已经在此处进行了讨论,我倾向于同意。自撰写此答案以来的五年中,我对该问题的看法肯定发生了变化。
mwcz '16

4

提供最新的答案:今天最好的方法是使用CSS网格布局,如下所示:

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-template-areas: 
    "top-left top-middle top-right"
    "bottom bottom bottom"
}

.item-a {
  grid-area: top-left;
}
.item-b {
  grid-area: top-middle;
}
.item-c {
  grid-area: top-right;
}
.item-d {
  grid-area: bottom;
}

和HTML

<div class="item-a">1</div>
<div class="item-b">2</div>
<div class="item-c">3</div>
<div class="item-d">123</div>

3

您可以尝试使用诸如http://960.gs/的网格系统

假设您使用的是“ 12列”布局,您的代码将类似于以下内容:

<div class="container_12">
<div class="grid_4">1</div><div class="grid_4">2</div><div class="grid_4">3</div>
<div class="clear"></div>
<div class="grid_12">123</div>
</div>

3

尝试添加display: table-cell; width: 1%;到表格单元格元素中。


那有什么帮助?表格的基本概念是每一行都有相同的单元格。如果其中一行具有成功实现“ width:1%”的单元格,则所有行的该列均将为“ width:1%”。“ colspan”的要点是采用2个(或更多)固定宽度的列,并将其合并以获得合并的宽度。
IAM_AL_X

3

尽管取得了一些成功,但是我取得了一些成功:

table-layout: fixed border-collapse: separate

和容易分裂/跨越的单元格“宽度”,即4 x 25%宽度的单元格:

.div-table-cell,
* {
  box-sizing: border-box;
}

.div-table {
  display: table;
  border: solid 1px #ccc;
  border-left: none;
  border-bottom: none;
  table-layout: fixed;
  margin: 10px auto;
  width: 50%;
  border-collapse: separate;
  background: #eee;
}

.div-table-row {
  display: table-row;
}

.div-table-cell {
  display: table-cell;
  padding: 15px;
  border-left: solid 1px #ccc;
  border-bottom: solid 1px #ccc;
  text-align: center;
  background: #ddd;
}

.colspan-3 {
  width: 300%;
  display: table;
  background: #eee;
}

.row-1 .div-table-cell:before {
  content: "row 1: ";
}

.row-2 .div-table-cell:before {
  content: "row 2: ";
}

.row-3 .div-table-cell:before {
  content: "row 3: ";
  font-weight: bold;
}

.div-table-row-at-the-top {
  display: table-header-group;
}
<div class="div-table">

  <div class="div-table-row row-1">

    <div class="div-table-cell">Cell 1</div>
    <div class="div-table-cell">Cell 2</div>
    <div class="div-table-cell">Cell 3</div>

  </div>

  <div class="div-table-row row-2">

    <div class="div-table-cell colspan-3">
      Cor blimey he's only gone and done it.
    </div>

  </div>

  <div class="div-table-row row-3">

    <div class="div-table-cell">Cell 1</div>
    <div class="div-table-cell">Cell 2</div>
    <div class="div-table-cell">Cell 3</div>

  </div>

</div>

https://jsfiddle.net/sfjw26rb/2/

同样,应用display:table-header-group或table-footer-group是将“行”元素跳到“表”顶部/底部的便捷方法。


0

如果使用div和span,则当datagrid-table行的容量更大时,它将占用更多的代码大小。以下代码在所有浏览器中均已选中

HTML:

<div id="gridheading">
<h4>Sl.No</h4><h4 class="big">Name</h4><h4>Location</h4><h4>column</h4><h4>column</h4><h4>column</h4><h4>Amount(Rs)</h4><h4>View</h4><h4>Edit</h4><h4>Delete</h4> 
</div>
<div class="data"> 
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>
<div class="data"> 
<h4>01</h4><h4 class="big">test</h4><h4>TVM</h4><h4>A</h4><h4>I</h4><h4>4575</h4><h4>4575</h4></div>

CSS:

#gridheading {
    background: #ccc;
    border-bottom: 1px dotted #BBBBBB;
    font-size: 12px;
    line-height: 30px;
    text-transform: capitalize;
}
.data {
    border-bottom: 1px dotted #BBBBBB;
    display: block;
    font-weight: normal;
    line-height: 20px;
    text-align: left;
    word-wrap: break-word;
}
 h4 {
    border-right: thin dotted #000000;
    display: table-cell;
    margin-right: 100px;
    text-align: center;
    width: 100px;
    word-wrap: break-word;
}
.data .big {
    margin-right: 150px;
    width: 200px;
}

0
column-span: all; /* W3C */
-webkit-column-span: all; /* Safari & Chrome */
-moz-column-span: all; /* Firefox */
-ms-column-span: all; /* Internet Explorer */
-o-column-span: all; /* Opera */

http://www.quackit.com/css/css3/properties/css_column-span.cfm


没有足够的支持...令人遗憾的是,IE8仍然是演进的一个长期问题
beauXjames

9
OP希望table-cell跨多个表列。column-span用于控制列布局。这样一来,您就可以像报纸一样在多个列上排列文本。
克里斯·

1
的确如此-虽然在display上使用它确实非常好:元素,仅适用于css列:jsfiddle.net/mk0rrLc3/1
标记

@ Mark-- column-span与父级上定义的column-count属性一起使用。无需更改显示类型。另外,column-span只能接受1或全部作为值,它不允许小数,因此,如您所见,“ column-span:2”不是该属性的有效使用。
MistyDawn

0

如果因为必须打开或关闭colspan属性(例如移动版式)而来到这里:

复制<td>s,仅显示具有所需内容的colspan

table.colspan--on td.single {
  display: none;
}

table.colspan--off td.both {
  display: none;
}
<!-- simple table -->
<table class="colspan--on">
  <thead>
    <th>col 1</th>
    <th>col 2</th>
  </thead>
  <tbody>
    <tr>
      <!-- normal row -->
      <td>a</td>
      <td>b</td>
    </tr>
    <tr>
      <!-- the <td> spanning both columns -->
      <td class="both" colspan="2">both</td>

      <!-- the two single-column <td>s -->
      <td class="single">A</td>
      <td class="single">B</td>
    </tr>
    <tr>
      <!-- normal row -->
      <td>a</td>
      <td>b</td>
    </tr>
  </tbody>
</table>
<!--
that's all
-->

 

<!--
stuff only needed for making this interactive example looking good:
-->
<br><br>
<button onclick="toggle()">Toggle colspan</button>
<script>/*toggle classes*/var tableClasses = document.querySelector('table').classList;
function toggle() {
  tableClasses.toggle('colspan--on');
  tableClasses.toggle('colspan--off');
}
</script>
<style>/* some not-needed styles to make this example more appealing */
td {text-align: center;}
table, td, th {border-collapse: collapse; border: 1px solid black;}</style>


0

CSS属性“ column-count”,“ column-gap”和“ column-span”可以通过将伪表的所有列保留在同一包装器中的方式来做到这一点(HTML保持整洁)。

唯一需要注意的是,您只能定义1列或所有列,并且column-span在Firefox中尚不起作用,因此需要一些其他CSS来确保其正确显示。 https://www.w3schools.com/css/css3_multiple_columns.asp

.split-me {
  -webkit-column-count: 3;
  -webkit-column-gap: 0;
  -moz-column-count: 3;
  -moz-column-gap: 0;
  column-count: 3;
  column-gap: 0;
}

.cols {
  /* column-span is 1 by default */
  column-span: 1;
}

div.three-span {
  column-span: all !important;
}

/* alternate style for column-span in Firefox */
@-moz-document url-prefix(){
  .three-span {
    position: absolute;
    left: 8px;
    right: 8px;
    top: auto;
    width: auto;
  }
}


    
<p>The column width stays fully dynamic, just like flex-box, evenly scaling on resize.</p>

<div class='split-me'>
  <div class='col-1 cols'>Text inside Column 1 div.</div>
  <div class='col-2 cols'>Text inside Column 2 div.</div>
  <div class='col-3 cols'>Text inside Column 3 div.</div>
  <div class='three-span'>Text div spanning 3 columns.</div>
</div>



  <style>
/* Non-Essential Visual Styles */

html * { font-size: 12pt; font-family: Arial; text-align: center; }
.split-me>* { padding: 5px; } 
.cols { border: 2px dashed black; border-left: none; }
.col-1 { background-color: #ddffff; border-left: 2px dashed black; }
.col-2 { background-color: #ffddff; }
.col-3 { background-color: #ffffdd; }
.three-span {
  border: 2px dashed black; border-top: none;
  text-align: center; background-color: #ddffdd;
}
  </style>


0

我来这里是因为当前WordPress表块不支持colspan参数,我想我将使用CSS替换它。这是我的解决方案,假设列的宽度相同:

table {
  width: 100%;
}

table td {
  width: 50%;
  background: #dbdbdb;
  text-align: center;
}

table tr:nth-child(2n+1) {
  position:relative;
  display:block;
  height:20px;
  background:green;
}

table tr:nth-child(2n+1) td {
  position:absolute;
  left:0;
  right:-100%;
  width: auto;
  top:0;
  bottom:0;
  background:red;
  text-align:center;
}
<table>
    <tr>
        <td>row</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell</td>
    </tr>
    <tr>
        <td>row</td>
    </tr>
    <tr>
        <td>cell</td>
        <td>cell</td>
    </tr>
</table>


-1

您可以随时position:absolute;指定宽度并指定宽度。这不是一个非常流畅的方法,但是它可以工作。


除了使用不良标记外,还有更多方法可以实现此目的。强制布局的绝对定位一直被认为是不好的做法。
MistyDawn

-1

我创建了这个小提琴:

在此处输入图片说明

http://jsfiddle.net/wo40ev18/3/

的HTML

<div id="table">
<div class="caption">
    Center Caption
</div>
<div class="group">
      <div class="row">
            <div class="cell">Link 1t</div>
            <div class="cell"></div>
          <div class="cell"></div>
          <div class="cell"></div>
            <div class="cell"></div>
            <div class="cell ">Link 2</div>
      </div>
</div>

的CSS

   #table {
    display:table;
}

.group {display: table-row-group; }

.row {
    display:table-row;
    height: 80px;
    line-height: 80px;
}

.cell {
    display:table-cell;
    width:1%;
    text-align: center;
    border:1px solid grey;
    height: 80px
        line-height: 80px;
}

.caption {
    border:1px solid red; caption-side: top; display: table-caption; text-align: center; 
    position: relative;
    top: 80px;
    height: 80px;
      height: 80px;
    line-height: 80px;

}

1
但是我认为引导网格可以非常轻松地实现
Arun Prasad ES

这没有提供询问者所寻找的解决方案。它只是创建一个内联的单元格行。
MistyDawn

-1

媒体查询类可用于实现可重复标记的传递。这是我使用引导程序的方法:

  <tr class="total">
    <td colspan="1" class="visible-xs"></td>
    <td colspan="5" class="hidden-xs"></td>
    <td class="focus">Total</td>
    <td class="focus" colspan="2"><%= number_to_currency @cart.total %></td>
  </tr>

colspan 1(适用于移动设备),colspan 5(适用于其他使用CSS进行工作的人员)。


询问者特别指出,他不能使用HTML <table>元素。如果他能,这将是一个容易解决的问题。
MistyDawn
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.