web-dev-qa-db-ja.com

ブートストラップと互換性を保ちながら、複数の列にまたがる2つの行をテーブルに含めるにはどうすればよいですか？

Webアプリケーションでbootstrapを使用しています。ブートストラップのtable-stripedクラスを使用しながら、テーブルデザインレイアウトを機能させようとしています。現在使用中です。以下：

<table>
  <thead>
    <th>ID</th>
    <th>Name</th>
    <th>Department</th>
    <th>Started</th>
  </thead>
  <tbody>
    <tr>
      <td>6</td>
      <td>
         <div>John Doe</div>
         <div>12 Sales Total; 4 March, 3 April, 12 July, 14 August</div>
      </td>
      <td>Sales</td>
      <td>Feb. 12th 2010</td>
    </tr>
  </tbody>
</table>

ただし、テーブルの12 Sales Total; 4 March, 3 April, 12 July, 14 AugustがJohn Doe Sales Feb. 12th 2010の下に表示され、現在の列内にラップされないようにしたいと思います。 2つの別個の<tr>要素を使用してレイアウトを機能させると、table-stripedは適切に機能しなくなります。

編集：

これが現在の設定です。これは、divのテキストが他の列にまたがらず、現在の列内に収まるという問題を除いて、私が望むものを取得します。 http://jsfiddle.net/AkT6R/

以前に@Bryceが提出した回答で言及したことを試しましたが、これはBootstrapと思われます。 http://jsfiddle.net/AkT6R/1 /

htmltwitter-bootstraphtml-table
18
daveomcd

そのようです。 rowspanとcolspanが必要です：

<table border=1>
  <thead>
    <th>ID</th>
    <th>Name</th>
    <th>Department</th>
    <th>Started</th>
  </thead>
  <tbody>
    <tr>
      <td rowspan=2>6</td>
      <td>
         <div>John Doe</div>
      </td>
      <td>Sales</td>
      <td>Feb. 12th 2010</td>
    </tr>
    <tr>
        <td colspan=3>
         <div>12 Sales Total; 4 March, 3 April, 12 July, 14 August</div>
        </td>
    </tr>
  </tbody>
</table>

http://jsfiddle.net/brycenesbitt/QJ4m5/2/ で実際の動作をご覧ください

次に、CSSの問題について。右クリックして、Chromeで「要素を検査」します。背景色はbootstrap.min.css。これにより、偶数行と奇数行に色が適用されます。

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th
{
background-color: #f9f9f9;
}

ダブルサイズの行に適切に調整します。

.table-striped>tbody>tr:nth-child(4n+1)>td,
.table-striped>tbody>tr:nth-child(4n+2)>td
{    background-color: #ff10ff;
}
.table-striped>tbody>tr:nth-child(4n+3)>td,
.table-striped>tbody>tr:nth-child(4n+4)>td
{    background-color: #00ffff;
}

できた.

34
Bryce

Colspanタグ属性を使用します。

<td colspan="2">

または

<td colspan="4">

参照

2
cssyphus