11

まず、これに関する他の回答を読みましたが、表形式のデータの場合、テーブルを使用するのが最善の方法であることに気づきました。テーブル以外のものを使用する必要があるのは、特定のデータ行を他のデータ行にネストする必要がある jquery プラグイン (正確には Jquery UI ソート可能) を使用しているためです。テーブルでこれを行う方法がわからないため、別の要素を使用する必要があります (現在 div を使用しています)。

私のデータは、データごとに 1 セルの標準表形式データです。

Name  Address              
Bob   123 Main    edit_button  drag&drop_button
Joe   123 Fake    edit_button  drag&drop_button
Sue   456 Road    edit_button  drag&drop_button
Ann   123 Street  edit_button  drag&drop_button

この例では、ボブをドラッグすると、ボブのチームであるジョーとスーも一緒にドラッグされます。アンはスリーの上またはスリーの下にしか移動できませんが、ジョーとスーは互いに場所を入れ替えることしかできません。

html では、このように表示されます。

<div class="table">
    <div class="header">Header information</div>
    <div>
        <div class="row">Bob's information</div>
        <div>
            <div class="row">Joe's information</div>
            <div class="row">Sue's information</div>
        </div>
    </div>
    <div>
        <div class="row">Ann's information</div>
    </div>
</div>

私の知る限り、このネストはテーブルでは実行できません。

他のものがうまく機能する場合は、div を使用する必要はありません。

私の質問は基本的に、この情報を表形式で表示するにはどうすればよいですか?

現在、私の最善の推測では、ヘッダーを含むデータの各要素を固定幅の div に配置することです (そして、外観のために必要に応じて境界線を適用します)。 .

私が行った別の試みは、間違いなくはるかに面倒ですが、各「行」に、表示されないヘッダーを含む同じ設定の新しいテーブルを作成することです。これにより、ほぼ希望どおりの外観になりますが、名前が正確な長さでない場合、スペースの一部が著しくずれています。

PSテーブルが機能しない理由についての私の正当化は少し具体的すぎるように思えますが、実際の質問が具体的すぎないことを願っています。

編集：

テーブルを引き続き使用できるように、以下を機能させる方法はありますか?

<table>
    <thead>table header stuff</thead>
    <tbody>
        <mtne*>
            <tr>Bob's information</tr>
            <mtne>
                <tr>Joe's information</tr>
            </mtne>
            <mtne>
                <tr>Sue's information</tr>
            </mtne>
        </mtne>
        <mtne>
            <tr>Ann's information</tr>
        </mtne>
    </tbody>
</table>

*mtne = 神話上のテーブルのネスト要素。

編集2：

さらにテストしたところ、div をテーブルのように動作させるための css スタイリングにも同じ問題があることがわかりました。行が互いに隣接して配置されておらず、一部がネストされている場合、それらは幅データを共有しません。時間の制約により、事前に設定された幅の div を使用するように切り替える必要があります。

一緒に来るかもしれない他の人には、treeTablesを使用するときにいくつかの可能性があるかもしれませんが、私はまだそれをテストしておらず、先に進む必要があります.

4

2 に答える 2

20

display:table;CSSとdivを使用して、、display:table-row;などのテーブルをエミュレートできますdisplay:table-cell;。

jsFiddleでの作業デモ

HTML：

<div class="table">
  <div class="header">
    <div class="cell">Name</div>
    <div class="cell">Address</div>
    <div class="cell">Action 1</div>
    <div class="cell">Action 2</div>
  </div>
  <div class="rowGroup">
    <div class="row">
      <div class="cell">Bob</div>
      <div class="cell">Address</div>
      <div class="cell">Button</div>
      <div class="cell">Another button</div>
    </div>
  </div>
  <div class="rowGroup">
    <div class="row">
      <div class="cell">Joe</div>
      <div class="cell">Address</div>
      <div class="cell">Button</div>
      <div class="cell">Another button</div>
    </div>
    <div class="row">
      <div class="cell">Sue</div>
      <div class="cell">Address</div>
      <div class="cell">Button</div>
      <div class="cell">Another button</div>
    </div>
  </div>
  <div class="rowGroup">
    <div class="row">
      <div class="cell">Ann</div>
      <div class="cell">Address</div>
      <div class="cell">Button</div>
      <div class="cell">Another button</div>
    </div>
  </div>
</div>

CSS：

.table {
    display:table;
}
.header {
    display:table-header-group;
    font-weight:bold;
}
.rowGroup {
    display:table-row-group;
}
.row {
    display:table-row;
}
.cell {
    display:table-cell;
    width:25%;
}

IE8 +でサポートされています（これはCSS2.1の機能です）

参考文献：

于 2012-09-20T22:51:10.707 に答える
0

table1 つのオプションは、 a を a内にネストできることですtd。

JSフィドル

<table>
  <thead>
    <tr>
      <th>Outer Table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob's information
        <table>
          <thead>
            <tr>
              <th>Inner Table</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Joe's information</td>
            </tr>
            <tr>
              <td>Sue's information</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
    <tr>
      <td>Ann's information</td>
    </tr>
  </tbody>
</table>

PS - テーブル構造に注意してください - tds またはths をスキップすることはできません。

于 2012-09-20T22:42:24.467 に答える