当前位置: 首页 > 面试题库 >

带有表格布局的表格:固定;以及如何使一栏变宽

马俊
2023-03-14
问题内容

所以我有一张这种风格的桌子:

table-layout: fixed;

这将使所有列具有相同的宽度。我想有一列(第一列)变宽,然后其余列以相等的宽度占据表格的其余宽度。

如何实现?

table {

  border-collapse: collapse;

  width: 100%;

  border: 1px solid black;

  background: #ddd;

  table-layout: fixed;

}



table th, table td {

  border: 1px solid #000;

}



table td.wideRow, table th.wideRow {

  width: 300px;

}


<table class="CalendarReservationsBodyTable">

  <thead>

    <tr>

      <th colspan="97">Rezervovane auta</th>

    </tr>

    <tr>

      <th class="corner wideRow">Auto</th>

      <th class="odd" colspan="4">0</th>

      <th class="" colspan="4">1</th>

      <th class="odd" colspan="4">2</th>

      <th class="" colspan="4">3</th>

      <th class="odd" colspan="4">4</th>

      <th class="" colspan="4">5</th>

      <th class="odd" colspan="4">6</th>

      <th class="" colspan="4">7</th>

      <th class="odd" colspan="4">8</th>

      <th class="" colspan="4">9</th>

      <th class="odd" colspan="4">10</th>

      <th class="" colspan="4">11</th>

      <th class="odd" colspan="4">12</th>

      <th class="" colspan="4">13</th>

      <th class="odd" colspan="4">14</th>

      <th class="" colspan="4">15</th>

      <th class="odd" colspan="4">16</th>

      <th class="" colspan="4">17</th>

      <th class="odd" colspan="4">18</th>

      <th class="" colspan="4">19</th>

      <th class="odd" colspan="4">20</th>

      <th class="" colspan="4">21</th>

      <th class="odd" colspan="4">22</th>

      <th class="" colspan="4">23</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td class="alignRight wideRow">KE-260 FC - Octavia combi</td>

      <td class=" borderLeft"></td>

      <td class="odd"></td>

      <td class=""></td>

      <td class="odd"></td>

      <td class=" borderLeft"></td>

      <td class="odd"></td>

      <td class=""></td>

      <td class="odd"></td>

      <td class=" borderLeft"></td>

      <td class="odd"></td>

      <td class=""></td>

      <td class="odd"></td>

      <td class=" borderLeft"></td>

      <td class="odd"></td>

      <td class=""></td>

      <td class="odd"></td>

      <td class=" borderLeft"></td>

      <td class="odd"></td>

      <td class=""></td>

      <td class="odd"></td>

      <td class=" borderLeft"></td>

      <td class="odd"></td>

      <td class=""></td>

      <td class="odd"></td>

      <td class=" borderLeft"></td>

      <td class="odd"></td>

      <td class=""></td>

      <td class="odd"></td>

      <td class=" borderLeft"></td>

      <td class="odd"></td>

      <td class=""></td>

      <td class="odd"></td>

      <td colspan="16" class="highlighted borderLeft" title="Richard Knop">

        Richard Knop

      </td>

      <td class=" borderLeft"></td>

      <td class="odd"></td>

      <td class=""></td>

      <td class="odd"></td>

      <td class=" borderLeft"></td>

      <td class="odd"></td>

      <td class=""></td>

      <td class="odd"></td>

      <td class=" borderLeft"></td>

      <td colspan="14" class="highlighted" title="Richard Knop">

        Richard Knop

      </td>

      <td class="odd"></td>

      <td class=" borderLeft"></td>

      <td class="odd"></td>

      <td class=""></td>

      <td class="odd"></td>

      <td class=" borderLeft"></td>

      <td class="odd"></td>

      <td class=""></td>

      <td class="odd"></td>

      <td class=" borderLeft"></td>

      <td class="odd"></td>

      <td class=""></td>

      <td class="odd"></td>

      <td class=" borderLeft"></td>

      <td class="odd"></td>

      <td class=""></td>

      <td class="odd"></td>

      <td class=" borderLeft"></td>

      <td class="odd"></td>

      <td class=""></td>

      <td class="odd"></td>

      <td class=" borderLeft"></td>

      <td class="odd"></td>

      <td class=""></td>

      <td class="odd"></td>

    </tr>

  </tbody>

</table>

注意第一列,我希望它要300px宽。


问题答案:

您可以给第一个单元格(因此列)一个宽度,其余的默认为 auto

table {

  table-layout: fixed;

  border-collapse: collapse;

  width: 100%;

}

td {

  border: 1px solid #000;

  width: 150px;

}

td+td {

  width: auto;

}


<table>

  <tr>

    <td>150px</td>

    <td>equal</td>

    <td>equal</td>

  </tr>

</table>

或者获取列宽的“正确方法”可能是使用col元素本身

table {

  table-layout: fixed;

  border-collapse: collapse;

  width: 100%;

}

td {

  border: 1px solid #000;

}

.wide {

  width: 150px;

}


<table>

  <col span="1" class="wide">

    <tr>

      <td>150px</td>

      <td>equal</td>

      <td>equal</td>

    </tr>

</table>


 类似资料:
  • 问题内容: 许多人仍然使用表格来布局控件,数据等。-流行的jqGrid就是一个例子。但是,发生了一些我似乎无法理解的魔术(它的桌子大声喊叫,可能有多少魔术?) 如何设置表的列宽并使它像jqGrid那样遵守!?如果我尝试复制此内容,即使我设置了every ,只要这些单元格之一的内容大于20px,该单元格就会展开! 有什么想法或见解吗? 问题答案: 您可以尝试对所有行使用标签管理表样式,但是您需要在或

  • 主要内容:本节引言:,1.本节学习路线图,2.TableLayout的介绍,3.如何确定行数与列数,4.三个常用属性,5.使用实例,6.发现的问题,本节小结:本节引言: 前面我们已经学习了平时实际开发中用得较多的线性布局(LinearLayout)与相对布局(RelativeLayout), 其实学完这两个基本就够用了,笔者在实际开发中用得比较多的也是这两个,当然作为一个好学的程序猿, 都是喜欢刨根问题的,所以虽说用得不多,但是还是有必要学习一下基本的用法的,说不定哪一天能用得上呢! 你说是吧,

  • 学完了 Android 两个经典布局,是不是觉得已经可以应对大多数场景了?我记得当我学完 LinearLayout 和 RelativeLayout 之后,我觉得 UI 布局已经可以出师了,在本人从事了多年的 Android 研究之后,可以很负责任的告诉你,的确可以出师了。 大多数场景都可以通过这两个布局方式组合出来,不过光靠这两招出师可能会走不少弯路,因为 Google 还为我们提供了很多实用的

  • 问题内容: 我有一个用于收件箱的简单表,如下所示: 如何设置宽度,以便“起始日期”和“日期”分别为页面宽度的15%和“主题”为70%。我还希望表格占据整个页面的宽度。 问题答案:

  • 在可视化模型中,一个表格既可以生成块级框(display:table),也可以生成行内级框(display:inline-table),默认生成块级框。 无论是块级框,还是行内级框,table元素都会生成一个主框,其中包含一个 table 框和一个 caption 框。如图 7‑1 所示: 图7-1 表格的可视化模型 上图中,灰色虚线框的区域为 table元素形成的主框,蓝色区域为 table 框

  • 本文向大家介绍Bootstrap CSS布局之表格,包括了Bootstrap CSS布局之表格的使用技巧和注意事项,需要的朋友参考一下 表格组件中,BootStrap提供了 1种基础.table样式 4种附加样式(.table-striped/.table-bordered/.table-hover/.table-condensed) 1种支持响应式布局的.table-responsive tab