1

多くのテキストを含む td を停止して、その上の td を同じ長さにするにはどうすればよいですか?

この例では、「1」を含むセルのアウトラインは、「ここに長いテキスト」を含むセルと同じ幅を示しています。私が望むのは、「1」を含むセルの幅を、含まれるテキストに合わせて必要なだけにすることです。

これはCSSで行うことができますか？

http://jsfiddle.net/r7yXD/1/

<table>
 <tr> 
  <td>1</tRund>
  <td>2</td>
 </tr>
 <tr> 
  <td>long text here</td>
  <td>.</td>
 </tr>
</table>


td {
border: 1px solid red;
}​

下の画像を見ると、最初の例は何が起こるか理解できますが、代わりに CSS を使用して 2 番目のオプションを発生させることはできますか?

<img src="https://i.stack.imgur.com/lJoaJ.jpg" alt="ここに画像の説明を入力">

4

3 に答える 3

1

できません。tdを同じ幅にするのはテーブルの性質です。

ただし、追加の td を追加して を使用することもできますがcolspan="2"、正直なところ、特にテキストでそのようなことを行う必要がある場合は、おそらくテーブルを使用するべきではありません。

于 2012-12-12T14:54:52.637 に答える
1

このようなことを試しましたか

<style type="text/css">
td {
border: 1px solid red;
}​
</style>

<table>
 <tr> 
  <td>1</td>
  <td colspan="2">2</td>
 </tr>
 <tr> 
  <td colspan="2">long text here</td>
  <td>.</td>
 </tr>
</table>
于 2012-12-12T14:57:40.820 に答える
0

コメントで述べたように、これは要素を使用して行うことはできません<table>。詳細については、w3.org の「17.5 テーブル コンテンツのビジュアル レイアウト」を参照してください。

それは言います：

これらのボックスの視覚的なレイアウトは、行と列の長方形の不規則なグリッドによって管理されます。各ボックスは、次の規則に従って決定されるグリッド セルの整数を占有します。

そして、あなたのケースにとって興味深いのは、ルール番号 5 からです。

[…] したがって、各セルは長方形のボックスであり、幅と高さが 1 つ以上のグリッド セルです。[…]

于 2012-12-12T15:17:04.113 に答える