Html 对齐问题_Html_Css_Twitter Bootstrap

Html 对齐问题

html css twitter-bootstrap

Html 对齐问题,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我有一个html表，它的标题需要修复。我正在使用引导类来修复html标题，但是我看到了很多问题。请找到样品。我面临的问题是，标题未从第一列开始显示，换行符未应用于列标题或列。请给我一些建议。有没有更好的办法来解决这个问题 <tr class ="row" > html代码： <div class="modal-body" id="modal-body"> <table id="myTable" class="table table-fixedheader

我有一个html表，它的标题需要修复。我正在使用引导类来修复html标题，但是我看到了很多问题。请找到样品。我面临的问题是，标题未从第一列开始显示，换行符未应用于列标题或列。请给我一些建议。有没有更好的办法来解决这个问题

 <tr class ="row" >

html代码：

<div class="modal-body"  id="modal-body">
<table id="myTable" class="table table-fixedheader table-bordered table-striped"> <thead>
<tr class="row"><th class="col-md-7">Header1</th><th class="col-md-4">Header2</th><th class="col-md-3">Header3</th><th class="col-md-4">Header4</th></tr>
</thead><tbody>
<tr><td>1111</td><td>33333</td><td>1111</td><td>3333322222222222222222222222222222</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>112222222222222215555555551</td><td>33333</td><td>1111</td><td>33333</td></tr>         
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>         
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> <tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>         
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> <tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>         
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
</tbody>  </table>
</div>

 <tr class ="row" >


校长1校长2校长3校长4
11113333311113333322222222222222222222222222222
111133333111133333
11222222222222221555555555133333111133333         
111133333111133333
111133333111133333
111133333111133333
111133333111133333
111133333111133333
111133333111133333
111133333111133333 111133333111133333         
111133333111133333
111133333111133333
111133333111133333 111133333111133333         
111133333111133333

1。）标题中的单元格

tr

具有引导类，其合计宽度为18列（7+4+3+4），但一行只能容纳引导网格系统中的12列

 <tr class ="row" >

2.）你写的是不应用wordwrap，但是你没有任何关于wordwrap的CSS规则。

1。）你的标题

tr

中的单元格有引导类，它们的总宽度为18列（7+4+3+4），但在引导网格系统中，一行只能容纳12列

 <tr class ="row" >

2.）您编写的wordwrap未应用，但您没有任何适用于wordwrap的CSS规则。

您正在使用class

。行

仅在一行上：

<tr class="row">
<th class="col-md-7">Header1</th>
<th class="col-md-4">Header2</th>
<th class="col-md-3">Header3</th>
<th class="col-md-4">Header4</th>
</tr>

 <tr class ="row" >


校长1
校长2
校长3
校长4

您可以在每一行上使用相同的类，也可以删除它，使行中没有类

<tr></tr>

 <tr class ="row" >

这将解决您的问题。

您只在一行上使用class

。行

：

<tr class="row">
<th class="col-md-7">Header1</th>
<th class="col-md-4">Header2</th>
<th class="col-md-3">Header3</th>
<th class="col-md-4">Header4</th>
</tr>

 <tr class ="row" >


校长1
校长2
校长3
校长4

您可以在每一行上使用相同的类，也可以删除它，使行中没有类

<tr></tr>

 <tr class ="row" >

这将解决您的问题。

唯一遗漏的简单事情是使用相同的结构（或CSS类），我已经检查了您的小提琴中的代码，这应该适用于您所介绍的场景

 <!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body" id="modal-body">
                <table id="myTable" class="table table-fixedheader table-bordered table-striped table-scroll">
                    <thead>

                        <tr class="row">
                            <th class="col-md-3">Header1</th>
                            <th class="col-md-4">Header2</th>
                            <th class="col-md-3">Header3</th>
                            <th class="col-md-4">Header4</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">33333</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">5443545435354543</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">33333</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">5437665</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">33333</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">5435435443</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">33333</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">68678454</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">786876</td>
                            <td class="col-md-3">8787876</td>
                            <td class="col-md-4">6765767</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">7656765</td>
                            <td class="col-md-4">656456</td>
                            <td class="col-md-3">116611</td>
                            <td class="col-md-4">43434</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">43243432434324342</td>
                            <td class="col-md-4">33344343233</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">4343</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">432434343243243</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">432443</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">333333</td>
                            <td class="col-md-3">111312312123121</td>
                            <td class="col-md-4">32112</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

 <tr class ="row" >

唯一遗漏的是使用相同的结构（或CSS类），我已经检查了您的fiddle中的代码，这应该适用于您介绍的场景

 <!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
</button>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body" id="modal-body">
                <table id="myTable" class="table table-fixedheader table-bordered table-striped table-scroll">
                    <thead>

                        <tr class="row">
                            <th class="col-md-3">Header1</th>
                            <th class="col-md-4">Header2</th>
                            <th class="col-md-3">Header3</th>
                            <th class="col-md-4">Header4</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">33333</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">5443545435354543</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">33333</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">5437665</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">33333</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">5435435443</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">33333</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">68678454</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">786876</td>
                            <td class="col-md-3">8787876</td>
                            <td class="col-md-4">6765767</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">7656765</td>
                            <td class="col-md-4">656456</td>
                            <td class="col-md-3">116611</td>
                            <td class="col-md-4">43434</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">43243432434324342</td>
                            <td class="col-md-4">33344343233</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">4343</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">432434343243243</td>
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">432443</td>
                        </tr>
                        <tr class="row">
                            <td class="col-md-3">1111</td>
                            <td class="col-md-4">333333</td>
                            <td class="col-md-3">111312312123121</td>
                            <td class="col-md-4">32112</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

 <tr class ="row" >

重新计算

 <tr class ="row" >

用这个

 <tr class ="row" >

  <tr>

您的最新小提琴

重铺此

 <tr class ="row" >

用这个

 <tr class ="row" >

  <tr>

您更新的小提琴

感谢您提供的信息，在我的应用程序中，我有16列，每列的宽度不同。很少有列显示注释、信息等文本。。少数列只显示计数、百分比等数字。那么我可以使用引导类吗？因为引导行只能容纳12列。请注意，您正在使用的引导类都有百分比宽度，并且这些都是为12列网格设计的，请参见此处：如果您的类加起来超过这个值，它们将移动到下一行（在普通行中-表标记可能会强制它们保持在一行中，但它们的宽度仍然超过100%宽度）注：你当然可以使用其他的引导类，这样加起来就是12，比如5+2+3+2…谢谢你提供的信息，在我的应用程序中，我有16列，每列都有不同的宽度。很少有列显示注释、信息等文本，很少有列只显示计数、百分比等数字。那么我可以使用引导类吗？作为引导类rap行只能容纳12列。请注意，您正在使用的引导类都有百分比宽度，并且这些宽度是为12列网格设计的，请参见此处：如果您的类加起来超过这个宽度，它们将移动到下一行（在普通行中-表标记可能会强制它们保持在一行中，但它们的宽度仍然超过100%宽度）注：您当然可以使用其他引导类，使总和为12，如5+2+3+2…@NBaua不，它不起作用。请查找与代码有关的小提琴。第一个问题是标题未修复，第二个问题是数据未应用换行符。@NBaua不，它不起作用。请查找与代码有关的小提琴。第一个问题是标题未修复，第二个问题是数据未应用换行符。

 <tr class ="row" >