如何仅使用CSS强制一组表列具有相同的宽度？

时间：2016-10-15 13:13:20

标签： html css

请考虑以下小提琴：https://jsfiddle.net/sasoRP/uLm2n9oo/ 

<div class="table">
    <div class="row">
      <div class="column column-market-name"></div>
      <div class="column column-selection">Yes</div>
      <div class="column column-selection">No</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 1</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
  </div>

我希望最后2或3列（class：.column-selection）始终具有相同的宽度。 我还希望宽度适合最大列的内容。

看着小提琴，＆＃34;表1＆＃34;和＆＃34;表7＆＃34;对我来说很完美！但是这个解决方案的问题是：

  • 表2非常糟糕。我想要＆＃34;是否＆＃34;列宽适合 他们的内容如表1所示，留下剩余的空间 市场名称栏。

  • 表3不行，因为我想要＆＃34;半场时间＆＃34; ＆＃34;下半场＆＃34; 宽度相同。

  • 表4不行，因为我想要＆＃34;相同的宽度＆＃34;和＃34;适合内容＆＃34;。

  • 表4,5和6不合适，因为我想要＆＃34;相同的宽度＆＃34;和＃34;适合 内容＆＃34;

我对这个的解决方案有点迷失而没有应用JS魔法。

您是否了解针对这些要求的纯CSS 解决方案？

1 个答案:

答案 0 :(得分：0)

在table-layout:fixed上使用.table，然后将width:33%分配给每个顶级表格单元格。我在每个顶部单元格中添加了.header个类来说明。我还添加了border-collapse:collapse以获得更好的契合度，但这并非完全必要。

table-layout:fixed属性将使表格以更直观的方式运行。如果设置列宽，则它将保持该宽度。它基本上允许您设置每列的宽度和表格的宽度，而不影响它的内容。总控制和浏览器也将使其更快。我将第一个表格的列宽设置为33％，使它们相等。正如您所看到的，其他表格紧随其后没有任何明确的宽度，因为最初固定的表格将平均分配表格的宽度。

当你说＆＃34;相同的宽度＆＃34;时会感到困惑。和＃34;适合内容＆＃34;因为有时候一个人不能与另一个人存在，所以我将其他人留下了＃34;相等的宽度＆＃34;。 ＆＃34;相同的宽度＆＃34;和＃34;适合内容＆＃34;如果有可能表CSS（我不认为它实际上可能没有JS *），可以将一列拉伸到80％并强制其他列符合相同长度的拉伸意味着表本身必须增加140％。 有关详细信息，请参阅此article。

修改

*经过进一步考虑，我相信使用flexbox可以实现确切的行为。那将超出简单表的范围......

FIDDLE

段

＆＃13;
＆＃13; 
.table {
  display: table;
  width: 100%;
  margin-bottom: 30px;
  overflow: hidden;
  table-layout: fixed;
}
.table-container {
  width: 638px;
}
.row {
  display: table-row;
  position: relative;
}
.column {
  display: table-cell;
  position: relative;
  padding: 5px;
  border: solid 1px black;
  text-align: center;
  vertical-align: middle;
}
.column.column-selection {} .column.column-market-name {
  text-align: left;
}
.header1 {
  width: 10%;
}
.header2 {
  width: 20%;
}
.header3 {
  width: 33%;
}
＆＃13; 
<h1>
  Table 1
</h1>

<div class="table-container">
  <div class="table table-1">
    <div class="row">
      <div class="column column-market-name header3"></div>
      <div class="column column-selection header3">Yes</div>
      <div class="column column-selection heade3">No</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 1</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Very Long Market Name 2 fasdf sfsa fdsafasdfadsf s adsfadsf sadfsadfasfd adsfadsfsa dfadfasd fdsafadsfasd</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 3</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
  </div>
</div>

<h1>
  Table 2
</h1>

<div class="table-container">
  <div class="table table-2">
    <div class="row">
      <div class="column column-market-name"></div>
      <div class="column column-selection header1">Yes</div>
      <div class="column column-selection header1">No</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 1</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 2</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 3</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
  </div>
</div>

<h1>
  Table 3
</h1>

<div class="table-container">
  <div class="table table-3">
    <div class="row">
      <div class="column column-market-name"></div>
      <div class="column column-selection header2">Half Time</div>
      <div class="column column-selection header2">Second Half Result</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 1</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Very Long Market Name fasdf sfsa fdsafasdfadsf dasdsad asdasd asdasd asdad safsf asdfafgsfddsadf adsfasdf sadfasd fdsafadsfasd</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 3</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
  </div>
</div>

<h1>
  Table 4
</h1>

<div class="table-container">
  <div class="table table-4">
    <div class="row">
      <div class="column column-market-name"></div>
      <div class="column column-selection">Half Time</div>
      <div class="column column-selection">Second Half Result</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 1</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 2</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 3</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
  </div>
</div>

<h1>
  Table 5
</h1>

<div class="table-container">
  <div class="table table-5">
    <div class="row">
      <div class="column column-market-name"></div>
      <div class="column column-selection">Borussia Munchenglabach</div>
      <div class="column column-selection">The Draw</div>
      <div class="column column-selection">Wolverhampton Wanderes</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 1</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Very Long Market Name fasdf adsafd adfds fsadfsa dfsadfsad fsadfsadf safdasdfsfsa fdsafasdfadsf sadfasd fdsafadsfasd</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 3</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
  </div>
</div>

<h1>
  Table 6
</h1>

<div class="table-container">
  <div class="table table-6">
    <div class="row">
      <div class="column column-market-name"></div>
      <div class="column column-selection">Borussia Munchenglabach</div>
      <div class="column column-selection">The Draw</div>
      <div class="column column-selection">Wolverhampton Wanderes</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 1</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 2</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 3</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
  </div>
</div>


<h1>
  Table 7
</h1>

<div class="table-container">
  <div class="table table-7">
    <div class="row">
      <div class="column column-market-name"></div>
      <div class="column column-selection">Home or Draw</div>
      <div class="column column-selection">Home or Away</div>
      <div class="column column-selection">Draw or Away</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 1</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Very Long Market Name fasdf adsafd adfds fsadfsa dfsadfsad fsadfsadf safdasdfsfsa fdsafasdfadsf sadfasd fdsafadsfasd</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 3</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
  </div>
</div>

<h1>
  Table 8
</h1>

<div class="table-container">
  <div class="table table-8">
    <div class="row">
      <div class="column column-market-name"></div>
      <div class="column column-selection">Home or Draw</div>
      <div class="column column-selection">Home or Away</div>
      <div class="column column-selection">Draw or Away</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 1</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 2</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
    <div class="row">
      <div class="column column-market-name">Market Name 3</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
      <div class="column column-selection">Cel</div>
    </div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题