如何添加三角表格单元格

Question

我需要在一个小区加起来，直角三角形。

这个怎么做？

我尝试添加跨度和内跨度图标，但它就会出差错

<span style="position: relative;float:right;top:-30px;">@Html.ImageContent("triangle_bonus.png", "")</span>

Answer 1

使用CSS Triangles:

你基本上具有0高度，宽度0元件，以及使用该边界来构造的三角形。由于边界（例如，顶部之间和左）之间的线路是对角线，你可以制作一些漂亮的，纯色三角形吧！

Here's an Example!

HTML:

<table border="1">
    <tr>
        <td class="note">Triangle!</td>
        <td>No Triangle!</td>
    </tr>
</table>

CSS:

td {
    padding: 20px;
}
.note {
    position: relative;
}
.note:after { /* Magic Happens Here!!! */
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 0; 
    height: 0; 
    display: block;
    border-left: 20px solid transparent;
    border-bottom: 20px solid transparent;

    border-top: 20px solid #f00;
} /* </magic> */

好处：

• 没有图像！ - 这意味着，没有额外的要求。
• 没有额外的标记！ - 这意味着，你不乱丢你的HTML与unsemantic标记。
• 看起来在所有尺寸的好！ - 因为它呈现在浏览器中，它看起来完美的任何规模和任何决议上。

缺点：

• 取决于伪元素 - 这意味着较低的版本的IE将不显示的三角形。如果它是至关重要的，你可以修改CSS了一下，在你的HTML中使用，而不是依靠一个<span> :after。

Answer 2

通过谷歌发现了这个问题，并遇到了问题，所以我会不顾原岗位的年龄在这里添加此。

马达拉的答案适用于大多数的浏览器，以及一个工作表以外的任何位置在所有浏览器。但正如在评论中提到的，例如不工作在Firefox。

有关于very old ticket in Bugzilla不position:absolute;元素工作一个<td>。

主要解决方案是增加的内<div>：

HTML：

<table border="1">
<tr>
    <td><div class="note">Triangle!</div></td>
    <td>No Triangle!</td>
</tr>
</table>

CSS：

td .note {
    padding: 20px;
}

jsFiddle example

我没有发现它有可能实现无内<div>但只有当<td>是空的，这可能于事无补。

Answer 3

要做到电池里面的文字是div的好主意。但如果你只是把额外的div为ARROW不是文字。因为当td给宽度和高度与文字产生的问题保持与padding-top:20px; TOP。

我找到了另一种解决方案，并在所有主要的浏览器进行测试（例如：IF和FF以及）

.arrow-right-1 {
  position: absolute;
  top: -1px;
  right: -5px;
  float: right;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid red;
  transform: rotate(45deg);
}

td {
  border: solid 1px blue;
  width: 160px;
  height: 100px;
  /* padding: 0px !important; */
  /* vertical-align: top; */
  position: relative;
}

<table class="table">

  <tbody>
    <tr>
      <td>
        <div class="arrow-right-1"></div>you can increase or decrease the size of td's height or can put more text
      </td>

    </tr>

  </tbody>
</table>