4

Twitter ブートストラップを使用して、2 つのテーブルを整列させようとしています。私はそれについて間違った方法で進んでいると思い始めています。3列と2列の2つのテーブルがあります。3 列のテーブルを span6、span2、span4 に設定しました。2 列のテーブルを span6 と span6 に設定しました。ページ幅によっては、常に中央に揃うとは限りません。これを達成する方法はありますか？

例: http://jsfiddle.net/PSBtr/

<html>
<head><link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet"></head>

    <body>

    <table class="table table-bordered table-condensed">
    <thead>
    <tr>
        <th class="span6">fdsafdfdf f dfdafs sd</th>
        <th class="span2">tesaaat</th>
        <th class="span4">ffdsfsd d</th>                     
    </tr>
</thead>

</table>

<table class="table table-bordered table-condensed">
<thead>
<tr>
    <th class="span6" >fdfdf  fds f </th>
    <th class="span6">test</th>
</tr>
</thead>

</table>

</body>
</html>​​​​​​​​​​​

最終的には、拡張されるが最小サイズのテーブルもあるやや流動的なレイアウトを設計しようとしています。これを達成できるレイアウト (ブートストラップから) に関する追加の提案も役立ちます。

ありがとう！

4

1 に答える 1

1

以下のコードは、あなたが達成しようとしていることを達成します:

 <table class="table table-bordered table-condensed">
    <thead>
    <tr class="span12">
        <th class="span6">fdsafdfdf f dfdafs sd</th>
        <th class="span2">tesaaat</th>
        <th class="span4">ffdsfsd d</th>  
    </tr>
</thead>

</table>

<table class="table table-bordered table-condensed">
<thead>
<tr class="span12">
    <th class="span6">fdfdf  fds f </th>
    <th class="span6">test</th>
</tr>
</thead>

</table>

質問の後半については、正確な要件に依存するため、言うのは難しいでしょうが、はい、単一列の流動的なレイアウトを試すことができます..ユーザーがコンパクトな画面サイズでブラウジングする場合は、レスポンシブを検討する必要がありますデザイン..

于 2012-11-20T10:05:44.307 に答える