table怎么给列宽度不一致的tbody添加滚动条呢？

Question

我想要实现table宽度为100%，tbody超出table宽度或者高度时出现滚动条，但是tbody内的td宽度不均分tbody的宽度，保持他原本的宽度样式

<table style="border-collapse: collapse; width: 1260px; border-color: #dcdcdc; border-style: solid; height: 346px;" border="1">
        <tbody>
                <tr style="text-align: center;">
                        <td style="text-align: center; height: 56px; width: 1500px;" colspan="3">
                                <span style="font-family: 微软雅黑; font-size: 16px;">货号</span>
                                <span style="font-family: 微软雅黑; font-size: 16px;">K010#</span>
                                <span style="font-family: 微软雅黑; font-size: 16px;"><br></span>
                        </td>
                </tr>
                <tr style="text-align: center;">
                         <td style="width: 300px; text-align: center; height: 56px;">
                                  <span style="font-family: 微软雅黑; font-size: 16px;">颜色</span>
                         </td>
                         <td style="width: 600px; text-align: center; height: 56px;">
                                   <span style="font-family: 微软雅黑; font-size: 16px;">黄色</span>
                         </td>
                         <td style="width: 600px; text-align: center;">
                                   <span style="font-family: 微软雅黑; font-size: 16px;">&nbsp;黄色</span>
                         </td>
                </tr>
                <tr style="text-align: center;">
                         <td style="width: 300px; text-align: center; height: 56px;">
                                   <span style="font-family: 微软雅黑; font-size: 16px;">材质</span>
                         </td>
                         <td style="width: 600px; text-align: center; height: 56px;">
                                   <span style="font-family: 微软雅黑; font-size: 16px;">PS</span>
                         </td>
                         <td style="width: 600px; text-align: center;">
                                   <span style="font-family: 微软雅黑; font-size: 16px;">&nbsp;PS</span>
                         </td>
                </tr>
                <tr style="text-align: center;">
                        <td style="width: 300px; text-align: center; height: 56px;">
                                   <span style="font-family: 微软雅黑; font-size: 16px;">工艺</span>
                        </td>
                        <td style="width: 600px; text-align: center; height: 56px;">
                                   <span style="font-family: 微软雅黑; font-size: 16px;">注塑成型</span>
                        </td>
                        <td style="width: 600px; text-align: center;">
                                   <span style="font-family: 微软雅黑; font-size: 16px;">注塑成型&nbsp;</span>
                        </td>
                </tr>
                <tr style="text-align: center;">
                        <td style="width: 300px; text-align: center; height: 56px;">
                                   <span style="font-family: 微软雅黑; font-size: 16px;">净重</span>
                        </td>
                        <td style="width: 600px; text-align: center; height: 56px;">
                                   <span style="font-family: 微软雅黑; font-size: 16px;">67.6g</span>
                        </td>
                        <td style="width: 600px; text-align: center;">
                                   <span style="font-family: 微软雅黑; font-size: 16px;">&nbsp;67.6g</span>
                        </td>
                </tr>
                <tr style="text-align: center;">
                        <td style="width: 300px; text-align: center; height: 56px;">
                                   <span style="font-family: 微软雅黑; font-size: 16px;">尺寸</span>
                        </td>
                        <td style="width: 600px; text-align: center; height: 56px;">
                                   <span style="font-family: 微软雅黑; font-size: 16px;">见图片</span>
                        </td>
                        <td style="width: 600px; text-align: center;">
                                   <span style="font-family: 微软雅黑; font-size: 16px;">见图片&nbsp;</span>
                        </td>
                </tr>
        </tbody>
</table>

目前生成的表格是这样的

想要实现这个效果：

Answer 1

• 这篇文章：table表格表头固定  tbody添加纵向滚动条 并且隐藏滚动条 也许有你想要的答案，你可以看看
• 除此之外, 这篇博客: 为table标签内的tbody添加滚动条中的 定义与用法 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• calc() 函数用于动态计算长度值。

  • 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
  • 任何长度值都可以使用calc()函数进行计算；
  • calc()函数支持 "+", "-", "*", "/" 运算；
  • calc()函数使用标准的数学运算优先级规则；

  函数	chrome	IE	fire fox	safari	opera
  calc()	26.0 19.0 -webkit-	9.0	16.0 4.0 -moz-	7.0 6.0 -webkit-	15.0

  示例

  <!DOCTYPE html>
  <html lang="zh-cmn-Hans">
  <head>
  <meta charset="utf-8" />
  <title>calc()函数_CSS参考手册_web前端开发参考手册系列</title>
  <meta name="author" content="Joy Du(飘零雾雨), [e-mail], www.doyoe.com" />
  <style>
  .test {
  	width: calc(100% - 50px);
  	background: #eee;
  }
  </style>
  </head>
  <body>
  <div class="test">我的宽度为100% - 50px</div>
  </body>
  </html>