Question

我使用引导程序来管理我的内容。但是，我现在需要我的宽度才能使用水平滚动。这就是它的样子（ps：使用Razor和foreach生成，非常容易：））：

    <div class="panel">
<div class="panel-body">
<div class="row row-fluid">
<div class="col-md-12">
<div class="col-md-2">
  Some content
</div>
<div class="col-md-10">
  <table class="gridtable table-bordered table-spacing">
    <td class="gridrow">
      <th class="gridcol sidebar">Col 1</th>
      <th class="gridcol content">Col 2</th>
      <th class="gridcol content">Col 3</th>
      <th class="gridcol content">Col 4</th>
      <th class="gridcol content">Col 5 aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</th>
      <th class="gridcol content">Col 6</th>
      <th class="gridcol content">Col 7</th>
      <th class="gridcol content">Col 8</th>
      <th class="gridcol content">Col 9</th>
      <th class="gridcol content">Col 10</th>
      <th class="gridcol content">Col 11</th>
      <th class="gridcol content">Col 12</th>
    </td>
  </table>
</div>
</div>
<div class="col-md-12">
<div class="col-md-2">
  Some content
</div>
<div class="col-md-10">
  <table class="gridtable table-bordered table-spacing">
    <td class="gridrow">
      <th class="gridcol sidebar">Col 1</th>
      <th class="gridcol content">Col 2</th>
      <th class="gridcol content">Col 3</th>
      <th class="gridcol content">Col 4</th>
      <th class="gridcol content">Col 5</th>
      <th class="gridcol content">Col 6</th>
      <th class="gridcol content">Col 7</th>
      <th class="gridcol content">Col 8</th>
      <th class="gridcol content">Col 9</th>
      <th class="gridcol content">Col 10</th>
      <th class="gridcol content">Col 11</th>
      <th class="gridcol content">Col 12</th>
    </td>
  </table>
</div>
</div>
</div>
</div>
</div>

这里以jsfiddle为例：https://jsfiddle.net/dwhxuvfn/29/。

我的问题是，第2列，第3列等中的内容现在可能比预期的要大。问题是我的列中断以换行，这是我所不希望的。如果其中一列的内容太大，我希望所有列都增加宽度，并在需要时添加水平滚动。

PS：是的，我知道这很愚蠢，因为目标是使其具有响应能力，但这就是客户想要的...

请问有人有主意吗？

谢谢。

编辑：我有多个表，并且我需要所有列进行对齐。我进行了编辑以使其清晰。

Answer 1

首先，不要在表单元格上使用float。这通常会破坏桌子的布局，使您的生活更加艰难。我对您的jsfiddle进行了一些小的更改，我认为它可以根据需要显示该表：https://jsfiddle.net/efumgprd/

对于表标题列，最好使用white-space:nowrap，以使它们具有相等的高度，并迫使表扩展而不会尝试将文本换行。

@media only screen {
    .gridtable {
        width: auto;
        min-width: 100%;
    }
    .gridcol {
        box-sizing: border-box;
        white-space: nowrap;
    }
}

根据内容自动调整面板宽度

1 个答案: