jquery - 表格数据之外的文本

Question

如何在表格中添加 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 之外。它在谷歌浏览器中工作，但在 Firefox 中不工作。我正在使用 Twitter 引导程序。

Answer 1

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

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

演示

Answer 2

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

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

最初我误解了您的问题，如果您想要垂直文本，请查看：-

JS小提琴

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 错误）

_____看不见的桌子______
| ___ _____________ |  
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| | | | | |
| 我_我我________________我 |  
| 红色你的桌子| 高分辨率照片| CLIPARTO
| |
我________________________我

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）第二种方法是包裹在一个大的隐形桌子中

<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>

Answer 5

我需要同样的东西，我在表格的左侧添加了一个删除按钮，但它必须是表格的一部分，因为它是为每一行动态生成的。我使用position:absolute在 target 上或内部生成什么。我只是将类添加到最后一个`，并定位它。效果很好。这是我的一些代码：

CSS

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