-2

写真に描いた赤い線のように、テーブルの td の外側にテキストを追加するにはどうすればよいですか? 表のマークアップは次のとおりです。

<table>
<thead>
 <tr><th class="span2"><div class="outside"></div></th>
     <th class="span2"></th>
     <th class="span2"></th>
     <th class="span2"></th>
     <th class="span2"></th>
     <th class="span2"></th>    
 </tr>
</thead>
<tbody>
  <tr>
    <td class="span2"></td>
    <td class="span2"></td>
    <td class="span2"></td>
    <td class="span2"></td>
    <td class="span2"></td>
    <td class="span2"></td>
  </tr>
</tbody>

td 内にある ".outside" div の外側に絶対に配置するにはどうすればよいですか。Google Chrome では動作しますが、Firefox では動作しません。Twitter Bootstrap を使用しています。

ここに画像の説明を入力

4

5 に答える 5

1

:before疑似セレクターの使用についてはどうですか?

tr:before {
    content: "Text";
    font-size: 0.5em;
    display: inline-block;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

デモ

于 2013-07-03T17:39:21.367 に答える
0

テーブルの左側に削除ボタンを追加しましたが、行ごとに動的に生成されるため、テーブルの一部である必要がありました。私はposition:absoluteを、対象の の上または内部で生成されるものに使用しました。クラスを最後の`に追加して配置しました。それはうまくいきました。これが私のコードの一部です：

CSS

 `.deleteBtn {
  height: 76px;
  width: 50px;
  position: absolute;
  left: 40px;
  border: none;
  background-color: rgba(0,0,0,0);`
于 2013-07-03T18:15:07.813 に答える
0

通常のハック:

（悪いASCIIでごめんなさい）

______見えないテーブル______
| | ___ ______________ |  
| | | | | | | | | | | |
| | | | | | | | | | | |
| | | | | | | | | | | |
| | | | | | | | | | | |
| | | | | | | | | | | |
| | | | | | | | | | | |
| | 私は私___________私|  
| | 赤いあなたのテーブル |
| | | |
私__________私

1) を作成する

<span class="right"> Your given table </span>

そして左側のテーブル

<table>
<!-- empty rows --> <tr><td></td></tr>
<!-- empty rows --> <tr><td></td></tr>
<tr><td><img src="red-line-links.jpg"></td></tr>赤い線を表示したい場所
<!-- more empty rows --> <tr><td></td></tr>
</table>

スタイルシート:
.right{float:right;text-align:left;padding:5px 0 5px 5px;position:relative}

2) 2 番目の方法は、目に見えない大きなテーブルでラップすることです

<table border=0> <!-- use css for borders etc, border=0 is only for illustration -->
<tr>
<td>
<table id="first-table-with-red-lines">
...</table>
</td>
<td> <!-- your existing table -->
</td>
</tr>
</table>

于 2013-07-03T17:50:52.470 に答える
0

テーブルを div 内に保持し、このプロパティを div に追加します:-

#divid
{
border:2px dashed #ff2200;
}

最初はあなたの質問を誤解していました。縦書きのテキストが必要な場合は、これをチェックしてください:-

JSフィドル

于 2013-07-03T17:32:20.943 に答える