Question

如何在表格中添加文本以外的文字，就像我在照片中绘制的红线一样？表标记是：

<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之外。它适用于谷歌浏览器，但不适用于Firefox。我正在使用Twitter Bootstrap。

enter image description here

Answer 1

使用:before伪选择器怎么样？

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

<强> DEMO

Answer 2

将表保留在div中并将此属性添加到div： -

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

最初我误解了你的问题，如果你想要垂直文本检查一下： -

JS FIDDLE

Answer 3

我会在每行添加一个额外的列“<td>”给它一个特定的类让我们说“RowTitle”然后在css中删除样式，使它没有边框。

<table>
   <thead>
   <tr>
   <th>Title 1</th>
     <th>Title 2</th>
    <th>Title 3</th>
<th>Title 4</th>
     <th>Title 5</th>
 </tr>
</thead>
<tbody>
  <tr>
    <td class="RowTitle">Title Text</td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</tbody

的CSS： .RowTitle {border：white solid 0px}

Answer 4

通常黑客：

（抱歉糟糕的ASCII）

_____Invisible table______
|  ___   _____________   |  
|  | |   |           |   |
|  | |   |           |   |
|  | |   |           |   |
|  | |   |           |   |
|  | |   |           |   |
|  | |   |           |   |
|  I_I   I___________I   |  
| red        ur table    |
|                        |
I________________________I

1）创建一个

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

左侧有一张桌子

<table>
 <tr><td></td></tr>
 <tr><td></td></tr>
<tr><td><img src="red-line-links.jpg"></td></tr>您想要显示红线的地方  <tr><td></td></tr>
</table>

样式表：
.right{float:right;text-align:left;padding:5px 0 5px 5px;position:relative}

2）第二种方式是包裹一个不可见的大表

<table border=0> 
<tr>
<td>
<table id="first-table-with-red-lines">
...</table>
</td>
<td> 
</td>
</tr>
</table>

Answer 5

我需要相同的东西，我在表的左边添加了一个删除按钮，但它必须是表的一部分，因为它是为每一行动态生成的。我对目标上或内部生成的内容使用了 position：absolute 。我刚把这个类添加到最后一个`，然后定位它。它运作得很好。这是我的一些代码：

<强> CSS

 `.deleteBtn {
  height: 76px;
  width: 50px;
  position: absolute;
  left: 40px;
  border: none;
  background-color: rgba(0,0,0,0);`

表数据之外的文本

5 个答案: