Html 表css宽度由colspan属性打断_Html_Css

Html 表css宽度由colspan属性打断

html css

Html 表css宽度由colspan属性打断,html,css,Html,Css,使用创建表时 table-layout: fixed; 它消耗100%的宽度。然后尝试创建4列（10%、10%、40%、40%）但是，有些行只有2列长，因此我们使用colspan=“2”，但这会打破预定义的宽度值，并均匀分布所有内容我目前的解决方案是在td标记中嵌套表是否有更好的方法来执行此操作或阻止colspan打破我的宽度下面是一个简单的两列中断示例：编辑：代码更新代码以获得更好的示例 <!DOCTYPE html> <html> <head>

使用创建表时

table-layout: fixed;

它消耗100%的宽度。然后尝试创建4列（10%、10%、40%、40%）

但是，有些行只有2列长，因此我们使用

colspan=“2”

，但这会打破预定义的宽度值，并均匀分布所有内容

我目前的解决方案是在

td

标记中嵌套表

是否有更好的方法来执行此操作或阻止

colspan

打破我的宽度

下面是一个简单的两列中断示例：

编辑：代码更新代码以获得更好的示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
  table {
    table-layout: fixed;
   }
  </style>    
</head>
<body>
<table style="width: 100%">
  <caption>Table of Contents</caption>
  <tbody>
    <tr>
      <td style="width: 5%;">
        <div>1</div>
      </td>
      <td style="width: 95%;" colspan="2">
        <div>Chapter Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div></div>
      </td>
      <td style="width: 5%;">
        <div>a)</div>
      </td>
      <td style="width: 90%;">
        <div>Section Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div></div>
      </td>
      <td style="width: 5%;">
        <div>a)</div>
      </td>
      <td style="width: 90%;">
        <div>Section Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div>2</div>
      </td>
      <td style="width: 5%;">
        <div>-</div>
      </td>
      <td style="width: 90%;">
        <div>Chapter Name</div>
      </td>
    </tr>
    <tr>
      <td style="width: 5%;">
        <div>3</div>
      </td>
      <td style="width: 5%;">
        <div>-</div>
      </td>
      <td style="width: 90%;">
        <div>Chapter Name</div>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>

表格{
表布局：固定；
}
.短{
宽度：5%；
}
.朗{
宽度：90%；
}


JS-Bin
目录
1.
章名
（a）
节名
（a）
节名
2.
-
章名
3.
-
章名

您考虑过使用

caption元素在语义上被定义为表的标题（这是您正在尝试做的事情），并且至少从一开始就可用。它与所有浏览器版本兼容，包括IE6。您可以使用CSS对其进行样式设置，以实现您所追求的外观和感觉

html*
{
字体大小：98%；
颜色：#000；
字体系列：Arial！重要；
}
桌子{
表布局：固定；
}
表格标题{
字体大小：300%；
}
th，td{
填充：15px；
单词break：打破一切；
}


目录
1.
名称

有什么原因不能简单地指定

表格{width:100%；}

而不是使用

表格布局：fixed
html *
{
   font-size: 98%;
   color: #000;
   font-family: Arial !important;
}
table {
   width:100%;
}

th, td {
    padding: 15px;
    word-break: break-all;
    background:#ccc;
}

这里有一个解决方案：
您可以通过创建colgroup来解决问题：
<table style="width: 100%">
    <colgroup>
        <col class="short" />
        <col class="long" />
    </colgroup>
    <tr>
        <td colspan="2">
            <div style="font-size: 300%;">Table of Contents</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>1</div>
        </td>
        <td>
            <div>2</div>
        </td>
    </tr>
</table>

问题是：
长单词溢出会破坏缩放效果，单靠单词分解并不能解决这一问题。布局必须固定：（来自此问题[link]（）是的，我有，请参阅上面的更新。目录有章节，然后是章节和子章节。我使用colspan进行格式设置。谢谢你的帮助：）
html *
{
   font-size: 98%;
   color: #000;
   font-family: Arial !important;
}
table {
   width:100%;
}

th, td {
    padding: 15px;
    word-break: break-all;
    background:#ccc;
}

<table style="width: 100%">
    <colgroup>
        <col class="short" />
        <col class="long" />
    </colgroup>
    <tr>
        <td colspan="2">
            <div style="font-size: 300%;">Table of Contents</div>
        </td>
    </tr>
    <tr>
        <td>
            <div>1</div>
        </td>
        <td>
            <div>2</div>
        </td>
    </tr>
</table>

.short {
  width: 5%;
}
.long {
  width: 95%;  
}