Question

0

250

Views

Group table columns by using css or javascript

Output:

Current Output Image

Expected:

Expected Output Image

So what I like to do is create a responsive design, so that when the web-page is viewed in desktop screen, the table is displayed as above. I like to use CSS, JAVASCRIPT/JQUERY & HTML to achieve the above. I am attaching my code below:

CODE:

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

<table>
  <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>Alfreds Futterkiste</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

about 4 years ago · Juan Pablo Isaza

Answer question

0

250

Group table columns by using css or javascript

Find remote jobs

Andres GPT