HTML   发布时间:2022-04-15  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了html – Bootstrap表 – 将行的列中的一个拆分为两个大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我设法为Bootstrap中的表创建“双行”:
<table class="table table-@R_618_10495@ped table-bordered">
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>A</td>
        <td>A</td>
        <td>A</td>
    </tr>
    <tr>
        <td rowspan="2">B</td>
        <td>B1</td>
        <td>B1</td>
    </tr>

    <tr>
        <td>B2</td>
        <td>B2</td>
    </tr>
</table>

理想情况下,我希望它看起来像这样

玩colspan并没有真正帮助,只是打破了东西.我尝试将每行的第一列的colspan设置为2,将B的一个设置为1,并且还有其他< td>对于B1和B2,没有用.

解决方法

最后,我有一个解决方案:

SNIPPET

.container {
  BACkground-color: #ccc;
}
thead{
  BACkground:#C9E4F4;
}
table,th,td {
  text-align: center !important;
  border: 1.5px solid #929292 !important;
}
#text1 {
  BACkground-color: #cac;
}
#text2 {
  BACkground-color: #cca;
}
#navigation {
  BACkground-color: #acc;
}
<script src="http://cdnjs.cloudFlare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
  <tr>
    <thead>
      <th colspan="2">1</th>
      <th>2</th>
      <th>3</th>
    </thead>
  </tr>
  <tr>
    <td colspan="2">A</td>
    <td>A</td>
    <td>A</td>
  </tr>
  <tr>
    <td rowspan="2">B</td>
    <td>B1</td>
    <td>B1</td>
    <td>B1</td>
  </tr>
  <tr>
    <td>B2</td>
    <td>B2</td>
    <td>B2</td>
  </tr>
</table>

大佬总结

以上是大佬教程为你收集整理的html – Bootstrap表 – 将行的列中的一个拆分为两个全部内容,希望文章能够帮你解决html – Bootstrap表 – 将行的列中的一个拆分为两个所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。