html – 使用Bootstrap修复了表格行宽度

概述我在我的网站上使用bootstrap( link),但我对使用表格有点困惑.在bootraps之前,我的所有表格TD单元都有动态宽度,因此如果内容是长句子,则TD的宽度更大;如果只有11个字符长的文本输入,则TD的宽度更小.但是现在我所有的TD元素都有相同的宽度,我找不到方法,如何改变这个…… 这是我的表： <table id="table1" style="padding-top:10px;"> 我在我的网站上使用bootstrap( link),但我对使用表格有点困惑.在bootraps之前,我的所有表格TD单元都有动态宽度,因此如果内容是长句子,则TD的宽度更大;如果只有11个字符长的文本输入,则TD的宽度更小.但是现在我所有的TD元素都有相同的宽度,我找不到方法,如何改变这个……

这是我的表：

<table ID="table1" >    <tr>        <td colspan="6" >Title</td>    </tr>    <tr>        <td colspan="3" >SUBTitle 1</td>        <td colspan="3" >SUBTitle 2</td>    </tr>    <tr>        <td ><b>A.</b></td>        <td>Data Title 1</td>        <td><input type="text" maxlength="11" size="11" name="input_a"></td>        <td ><b>D.</b></td>        <td>Data Title 2</td>        <td><input type="text" maxlength="11" size="11" name="input_b"></td>    </tr>...</table>

所以我希望“数据标题X”单元格的宽度更大,因为输入文本字段更小的单元格.如果我手动给他们style =“wIDth：xyzpx;”属性它没有改变任何东西.

能以某种方式完成吗？

解决方法 尝试在表元素上使用span1,span2 … span12类(或者在需要时使用,例如输入)：

<table ID="table1">    <thead>        <tr>            <th colspan="6">Title</th>        </tr>        <tr>            <th colspan="3">SUBTitle 1</th>            <th colspan="3">SUBTitle 2</th>        </tr>    </thead>    <tr>        <td class='span1'><b>A.</b>        </td>        <td class='span4'>Data Title 1</td>        <td class='span1'>            <input type="text" maxlength="11" size="11" name="input_a"  />        </td>        <td class='span1'><b>D.</b>        </td>        <td class='span4'>Data Title 2</td>        <td class='span1'>            <input type="text" maxlength="11" size="11" name="input_b"  />        </td>    </tr></table>

这是jsFiddle

ps：bootstrap3中有col-(col-4,col-lg-4 …)类前缀

总结

以上是内存溢出为你收集整理的html – 使用Bootstrap修复了表格行宽度全部内容，希望文章能够帮你解决html – 使用Bootstrap修复了表格行宽度所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。