代码之家  ›  专栏  ›  技术社区  ›  DooDoo

如何为行标题和列标题创建单元格[已关闭]

  •  0
  • DooDoo  · 技术社区  · 8 年前

    请考虑这个形象:

    enter image description here

    如何使用CSS和HTML创建带有对角线的黄色单元格?

    谢谢

    2 回复  |  直到 8 年前
        1
  •  5
  •   לבני מלכה    8 年前

    使用 background-image: linear-gradient() table th:last-child 并将span中的每个文本设置为bwlow:

    td, th {
        border: 1px solid black;
        text-align: left;
        padding: 8px;
    }
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
    }
    table th:last-child {
      background-image: linear-gradient(
        to top left,
        yellow 48%,
        black,
        yellow 52%
      );
    }
    .col{
        float: right;
        margin-top: 7px;
    }
    <table>
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th><span class="row">row</span><span class="col">col</span></th>
      </tr>
      <tr>
        <td>Alfreds Futterkiste</td>
        <td>Maria Anders</td>
        <td>Germany</td>
      </tr>
      <tr>
        <td>Centro comercial Moctezuma</td>
        <td>Francisco Chang</td>
        <td>Mexico</td>
      </tr>
      <tr>
        <td>Ernst Handel</td>
        <td>Roland Mendel</td>
        <td>Austria</td>
      </tr>
      <tr>
        <td>Island Trading</td>
        <td>Helen Bennett</td>
        <td>UK</td>
      </tr>
      <tr>
        <td>Laughing Bacchus Winecellars</td>
        <td>Yoshi Tannamuri</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td>Magazzini Alimentari Riuniti</td>
        <td>Giovanni Rovelli</td>
        <td>Italy</td>
      </tr>
    </table>
        2
  •  1
  •   Ojasvi Bhargava    8 年前

    td, th { border: 1px solid black; text-align: left; padding: 8px; } 
    table { font-family: arial, sans-serif; border-collapse: collapse; ; } 
    table th:last-child { background-image: linear-gradient( to top left, yellow 48%, black, yellow 52% ); } 
    .col{ float: right; margin-top: 7px; }
    <table> 
    <tr>  
    <th>
    <span class="headrow">row</span>
    <span class="headcol">col</span>
    </th> 
    </tr> 
    </table>