0

CSSファイル内で次のように定義されているWebテンプレートを使用しています:-

div.dataTables_length select {
width: 50px;
}
.dataTables_filter input, .dataTables_length select {
display: inline-block;
margin-bottom: 0;
}

そして、テーブルは次のように定義されています:-

<div class="box-content">
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th></th> <th></th>
</tr></thead>
<tbody> 
<tr>

現在私が直面している問題は、テンプレートが自動的に値を切り捨て、その一部のみを表示することです。たとえば、長い説明値がある場合、セルにはその一部が表示されることがあります。したがって、次のようになるようにテーブルを変更する方法はありますか?

  1. テーブル セルの幅は常に同じですが、高さは動的です。
  2. 表は常に同じ幅にする必要があるため、長いテキストがある場合でもレイアウトから外れることはありません。
  3. 各フィールドの全文を表示するには、セルをアトミックに新しい行に移動する必要があります。

よろしく

：：：編集：：：

テーブルの列に長いテストが含まれている場合、テーブルは次のように表示されます。

ここに画像の説明を入力

4

1 に答える 1

1

切り捨ての問題は、コメントですでに対処されています。テーブルの幅について説明します。

表の列の幅を設定する場合は、すべての列に同じ幅を設定するか、特定の列に特定の幅を指定する必要があります。

.table th, .table td { width: 50px; } /* sets the default value of all columns */
.table .name { width: 100px; word-wrap: break-word; } /* overrides the default with specific value for certain column*/

<table class="table">
  <tr>
    <td class="name">James T. Kirk</td>
    <td class="name">Spock</td>
  </tr>
</table>

特にテキストの長さが変動する場合は、列幅にパーセンテージ (%) を使用することを避けます。

編集 - あなたの言いたいことが分かります。CSS スタイルの word-wrap: break-word; を配置する必要があります。上記のコードを更新し、jsfiddleデモを作成しました。

于 2013-07-09T16:58:18.317 に答える