Gather td element in one container element-CodePudding

start code

<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</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>
</table>

end code

If for example I want to apply a border on the block how contain the 2 td's ( Maria Anders , Germany ) , which html can I possibly use to wrap my 2 td's. I searching for a html tag how can help me wrap td's element's .

CodePudding user response：

You dont need to use an HTML tag to fix it, you can solve it with css class like this:

<style>
    html{
      box-sizing: border-box;
    }
    table, td, th{
      border: 1px solid black;
      border-collapse: collapse;
    }
   .selectedBorder1{
     border: 1px solid black;
     border-right-style: none;
   }
   .selectedBorder2{
     border: 1px solid black;
     border-left-style: none;
   }
</style>

<head>

</head>
<body>
    <h2>Cell that spans two rows</h2>
    <p>To make a cell span more than one row, use the rowspan attribute.</p>
    
    <table style="width:100%">
      <tr>
        <th>Company</th>
        <th>Contact</th>
        <th>Country</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>
    </table>
</body>
</html>

However if you want to do it with a tag i recommend to you to use this html attributes instead of Colspan & Rowspan, so add that tags inside your HTML and it will works.

Here you can find more of it: https://www.w3schools.com/html/html_table_colspan_rowspan.asp

CodePudding user response：

You can use <td style="border:solid">

<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td style="border:solid">Maria</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>

If you wanted it to go round Maria Anders and Germany you would have to do quite a lot of CSS using border-top, -left etc...

#l {
  border-left: solid;
}

#r {
  border-right: solid;
}

#l, #r {
  border-top: solid;
  border-bottom: solid;
}

<table style="width:100%">
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td id='l'>Maria Anders</td>
    <td id='r'>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
</table>