用斜杠拆分左边的单元格的html表 [英] html table with slash splitting the leftup cell

问题描述

我想知道如何在html中使用斜杠分割剩余单元格的表格？也就是说，对于表格中的左上角单元格，有一条对角线将其分成两部分，并在两侧都有一些文本。 解决方案

因为HTML是基于box对象的，所以没有办法用标准元素实现这一点。

最简单的方法是将你的单元分割成三栏，并在中间栏中使用 background-image ，它模仿您的表格单元格的边框宽度。

b
$ b

效果可以实现如下：

 < style type =text / css> 
表{
 border-spacing：0; 
} 
 
 table tr td {
 border：1px纯黑色; 
 
} 
 
表格.cell-left {
 border-right：0; 
} 
 
表格.cell-middle {
 border-left：0; 
 border-right：0; 
 background-image：url（slash.png）; 
 background-position：center center; 
} 
 
表格.cell-right {
 border-left：0; 
} 
< / style> 
 
< table> 
< tr> 
< td class =cell-left>单元格A< / td> 
< td class =cell-middle>& nbsp;< / td> 
< td class =cell-right>单元格B< / td> 
< / tr> 
< / table> 
  

注意：

• 提供的类名称仅用于示例目的，您可能希望将它们命名为语义恰当。


• 需要适当的图像，在我的测试中，我创建了一个简单的1像素对角线（您可以免费使用），但是你当然可以像你想的那样有创意。在上面的例子中，background-image被设置为在单元格的绝对中心对齐，这意味着您可以根据需要创建尽可能大的图像，以便相应地缩放。

I wonder how to write in html a table with slash splitting the leftup cell? i.e., for the leftup cell in the table, there is a diagonal line splitting it into two parts, with some texts on either sides.

解决方案

Since HTML is based on box objects, there's no way to achieve this with standard elements.

The simplest way to achieve this, would be to split your cell into three columns, and use a background-image in the middle column which mimics the border-width of your table cell.

This effect can be achieved as follows:

<style type="text/css">
    table {
        border-spacing: 0;
    }

    table tr td {
        border: 1px solid black;

    }

    table .cell-left {
        border-right: 0;
    }

    table .cell-middle {
        border-left: 0;
        border-right: 0;
        background-image: url(slash.png);
        background-position: center center;
    }

    table .cell-right {
        border-left: 0;
    }
</style>

  <table>
      <tr>
          <td class="cell-left">Cell A</td>
          <td class="cell-middle">&nbsp;</td>
          <td class="cell-right">Cell B</td>
      </tr>
  </table>

Note:

• The class names provided are for example purposes only, you will probably want to name them something more "semantically proper"
• An appropriate image will be required, in my testing I created a simple 1-pixel diagonal line (which you are free to use), however you can of course be as creative as you wish. In the example above the background-image is set to align in the absolute center of the cell, this means you can create the image as large as you like in order to scale accordingly.

这篇关于用斜杠拆分左边的单元格的html表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！