bugfix> html > 投稿

HTMLテーブル、td、trで請求書を作成する必要があります。このようなものが必要です

請求書のすべてのアイテムは新しい行にありますが、境界線のない行です。 tr のクラスを追加しようとしました素子

border: 0px solid black;

しかし、それは正しく機能していません。アドバイスしてもらえますか?

このスニペットではテーブルが作成されますが、どこにでも境界線があります

<!DOCTYPE html>
<html>
<head>
<style>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
    border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

</body>
</html>

回答 3 件
  • 以下のようなCSSのBorderスタイルを使用して、 <tr> のBorderを削除します   <td>  表で。

    border-right:none;
    border-left:none;
    border-bottom:none;
    border-top:none
    
    

    解決しましたか?

  • テーブルの境界線を設定しますが、セルの場合、各セルの位置に応じてカスタムクラスを指定する必要があります。上、右、ブース、左の4種類のボーダーをお勧めします。また、 border-collapse を設定することを忘れないでください  テーブルが互いにTDボーダーを折りたたむ:

    table {
       border:1px solid #000000;
       border-collapse:collapse;
    }
    td{
       padding:10px;
    }
    .tB{
      border-top:1px solid #000000
    }
    .rB{
      border-right:1px solid #000000
    }
    .bB{
      border-bottom:1px solid #000000
    }
    .lB{
      border-left:1px solid #000000
    }
    
    
    <table>
    <tr>
       <td class="rB">test</td>
       <td class="bB">test</td>
    </tr>
    <tr>
       <td class="rB bB">test</td>
       <td class="bB">test</td>
    </tr>
    </table>
    
    

  • スタイルプロパティborder:0を持つ特定のクラスを使用して、個々の行から境界線を削除できます。 以下の解決策を見つけてください(スニペットの上):

    tr.noBorder td {
      border: 0;
    }
    tr.noBorder td:first-child {
      border-right: 1px solid;
    }
    
    
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    thead {color:green;}
    tbody {color:blue;}
    tfoot {color:red;}
    table, th, td {
        border: 1px solid black;
    }
    </style>
    </head>
    <body>
    <table>
      <thead>
        <tr>
          <th>Month</th>
          <th>Savings</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Sum</td>
          <td>$180</td>
        </tr>
      </tfoot>
      <tbody>
        <tr class="noBorder">
          <td>January</td>
          <td>$100</td>
        </tr>
        <tr class="noBorder">
          <td>February</td>
          <td>$80</td>
        </tr>
      </tbody>
    </table>
    
    </body>
    </html>
    
    

あなたの答え