Html:表格Table自适应宽度,指定列固定宽度,其他列均分宽度

2021-01-2609:21:42网页制作Comments3,109 views字数 1234阅读模式

做表单界面时,我想到最好的方法应该是,标题栏所在的列宽度固定,内容栏所在的列宽度自适应且要均分,这样整体表格看起来才美观有序。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20877.html

要做到这一点,目前只摸索出一种办法:
1,给tabletable-layout: fixed;
2,在每个table的第一行,加<colgroup><col>,有多少列,对应加多少个<col>
3,给指定列固定宽度的<col>加成<td class="title">,然后给title定义宽度,其他列的<col>加成<col width="auto">文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20877.html

案例代码:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20877.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>案例文档</title>
  <style>
    table{
      width: 100%;
      border-collapse: collapse;
      border: 1px solid #000;
      word-break:break-word;
      word-wrap:break-word;
      table-layout: fixed;
    }
    table tr td{
      border: 1px solid #000;
    }
    .title {
      background-color: #eee; 
      width: 120px;
      text-align: center;
    }
  </style>
</head>
<body>
  <table>
    <colgroup>
      <col class="title">
      <col width="auto">
      <col class="title">
      <col width="auto">
    </colgroup>
    <tr>
      <td class="title">标题:</td>
      <td colspan="3"></td>
    </tr>
    <tr>
      <td class="title">标题:</td>
      <td>内容</td>
      <td class="title">标题:</td>
      <td></td>
    </tr>
    <tr>
      <td class="title">标题:</td>
      <td colspan="3"></td>
    </tr>
    <tr>
      <td class="title">标题:</td>
      <td>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</td>
      <td class="title">标题:</td>
      <td></td>
    </tr>
  </table>
</body>
</html>

注意:这里有一个问题,有可能你程序没法在table的第一行<tr>前面加<colgroup><col>,比如asp.net的webform里面就不知道怎么加,此时的变通方法是,把<colgroup><col>换成一个空的<tr><td>,在<td>上同样加对应的classwidth属性,然后通过样式把这个空行的边框和高度去掉,不显示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20877.html

原理:通过控制第一行各个列的宽度,来实现对整个表格的列进行控制。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/20877.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/zhizuo/20877.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定