文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >头上两行，不能在秒内设置列宽

问头上两行，不能在秒内设置列宽
EN

Stack Overflow用户
提问于 2018-02-09 22:43:31
回答 1查看 2K关注 0票数 3

我有一张有两行标题的桌子。我想设置第二行中某些列的宽度。我设置了一个科德芬来测试它。我发现，如果删除第一行标题，它将接受我指定的列宽度，而不会出现问题。但是对于第一行标题，它忽略了第二行中列的宽度。:(

请注意，我有div's在th的内部，这样我就可以对边框进行样式化。

以下是守则：

​

代码语言：javascript
复制
body {
  padding: 10px;
}

.data-table {
  width: 100%;
  border-spacing: 0 4px;
  border-collapse: separate;
  table-layout: fixed;
}/* Remove For SCSS*/
  .title-11, .title-21 {
    width: 40px;
  }
  .title-22 {
    width: 100px;
  }
  .title-24 {
    width: 100px;
  }

  thead tr th {
    border-collapse: separate; 
    border-spacing: 0 5px;
  }
   .title {
     /*
     background: linear-gradient(to right, transparent 0%, #bbb 0%,
       #bbb calc(100% - 10px), 
       transparent calc(100% - 10px)) 0 99% / 100% 1px 
       no-repeat; 
     */
     text-align: left; 
     padding-right: 10px;
  }

  .div-title {
    border-bottom: 1px solid #bbb;
  }
  .hdr-field {
    width: 150px;
  }
  tr .title:last-child {
    padding-right: 0;
  }
  .side-title {
    transform: rotate(-90deg);
    width: 25px;
  }
  .fieldname {
    width: 130px;
  }
  .fieldvalue.dest-data input[type=text] {
    width: 100%;
  }
  .bodySection {
    border-bottom: 10px solid #bbb;
    margin-bottom: 10px;
  }
  tr {
    // border-bottom: 10px solid #bbb;
  }
/*}*//* For SCSS*/
代码语言：javascript
复制
<table class="data-table">
  <thead>
    <tr>
      <th class="title-11"></th>
      <th colSpan="2" class="title title-12">
        <div class="div-title">Source</div>
      </th>
      <th colSpan="2" class="title title-13">
        <div class="div-title">Destination</div>
      </th>
    </tr>
    <tr>
      <th class="title-21"></th>
      <th colSpan="1" class="fieldname title title-22">
        <div class="div-title hdr-field">Field</div>
      </th>
      <th colSpan="1" class="title title-23">
        <div class="div-title">Value</div>
      </th>
      <th colSpan="1" class="fieldname title title-24">
        <div class="div-title hdr-field">Field</div>
      </th>
      <th colSpan="1" class="title title-25">
        <div class="div-title">Value</div>
      </th>
    </tr>
  </thead>
  <tbody class="bodySection">
    <tr>
      <td rowSpan="2" class="side-title">Name</td>
      <td class="fieldname src-data">Short Name</td>
      <td class="fieldvalue src-data"My Store/td>
      <td class="fieldname dest-data">Short Name</td>
      <td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
    </tr>
    <tr>
      <td class="fieldname src-data">Long Name</td>
      <td class="fieldvalue src-data"My Store/td>
      <td class="fieldname dest-data">Long Name</td>
      <td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
    </tr>
  </tbody>
  <tbody class="bodySection">
    <tr>
      <td rowSpan="2" class="side-title">Name2</td>
      <td class="fieldname src-data">Short Name2</td>
      <td class="fieldvalue src-data"My Store/td>
      <td class="fieldname dest-data">Short Name2</td>
      <td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
    </tr>
    <tr>
      <td class="fieldname src-data">Long Name2</td>
      <td class="fieldvalue src-data"My Store/td>
      <td class="fieldname dest-data">Long Name2</td>
      <td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
    </tr>
  </tbody>
</table>

​

因此，我只想澄清:问题是如何使字段列固定宽度，同时让值列找到自己的级别。

谢谢。

html-table
column-width
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-09 23:32:05

我不太明白为什么以及如何计算表布局，因为算法看起来相当复杂。。

但是，您可以通过使用一个好的ol‘<colgroup>来实现所需的布局。关于如何在HTML4规范计算列宽中使用它们，有一些不太难理解的信息。请注意，对于新的规范(col和colgroup不反对)，这也是正确的。

把这个插在<table>和<thead>之间的小提琴里：

代码语言：javascript
复制
<colgroup>
  <col>
  <col width="150">
  <col>
  <col width="150">
  <col>
</colgroup>

演示工作：

​

代码语言：javascript
复制
body {
  padding: 10px;
}

.data-table {
  width: 100%;
  border-spacing: 0 4px;
  border-collapse: separate;
  table-layout: fixed;
}/* Remove For SCSS*/
  .title-11, .title-21 {
    width: 40px; /* Wont be applied */
  }
  .title-22 {
    width: 100px; /* Wont be applied */
  }
  .title-24 {
    width: 100px; /* Wont be applied */
  }

  thead tr th {
    border-collapse: separate; 
    border-spacing: 0 5px;
  }
   .title {
     /*
     background: linear-gradient(to right, transparent 0%, #bbb 0%,
       #bbb calc(100% - 10px), 
       transparent calc(100% - 10px)) 0 99% / 100% 1px 
       no-repeat; 
     */
     text-align: left; 
     padding-right: 10px;
  }

  .div-title {
    border-bottom: 1px solid #bbb;
  }
  .hdr-field {
    width: 150px;
  }
  tr .title:last-child {
    padding-right: 0;
  }
  .side-title {
    transform: rotate(-90deg);
    width: 25px;
  }
  .fieldname {
    width: 130px;
  }
  .fieldvalue.dest-data input[type=text] {
    width: 100%;
  }
  .bodySection {
    border-bottom: 10px solid #bbb;
    margin-bottom: 10px;
  }
  tr {
    // border-bottom: 10px solid #bbb;
  }
/*}*//* For SCSS*/
代码语言：javascript
复制
<table class="data-table">
  <colgroup>
    <col width="40">
    <col width="100">
    <col>
    <col width="100">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th class="title-11"></th>
      <th colSpan="2" class="title title-12">
        <div class="div-title">Source</div>
      </th>
      <th colSpan="2" class="title title-13">
        <div class="div-title">Destination</div>
      </th>
    </tr>
    <tr>
      <th class="title-21"></th>
      <th class="fieldname title title-22">
        <div class="div-title hdr-field">Field</div>
      </th>
      <th class="title title-23">
        <div class="div-title">Value</div>
      </th>
      <th class="fieldname title title-24">
        <div class="div-title hdr-field">Field</div>
      </th>
      <th class="title title-25">
        <div class="div-title">Value</div>
      </th>
    </tr>
  </thead>
  <tbody class="bodySection">
    <tr>
      <td rowSpan="2" class="side-title">Name</td>
      <td class="fieldname src-data">Short Name</td>
      <td class="fieldvalue src-data"My Store/td>
      <td class="fieldname dest-data">Short Name</td>
      <td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
    </tr>
    <tr>
      <td class="fieldname src-data">Long Name</td>
      <td class="fieldvalue src-data"My Store/td>
      <td class="fieldname dest-data">Long Name</td>
      <td class="fieldvalue dest-data"><input type="text" value="My Store" /></td>
    </tr>
  </tbody>
  <tbody class="bodySection">
    <tr>
      <td rowSpan="2" class="side-title">Name2</td>
      <td class="fieldname src-data">Short Name2</td>
      <td class="fieldvalue src-data"My Store/td>
      <td class="fieldname dest-data">Short Name2</td>
      <td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
    </tr>
    <tr>
      <td class="fieldname src-data">Long Name2</td>
      <td class="fieldvalue src-data"My Store/td>
      <td class="fieldname dest-data">Long Name2</td>
      <td class="fieldvalue dest-data"><input type="text" value="My Store2" /></td>
    </tr>
  </tbody>
</table>

​

票数 2
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/48715187

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档