CODEWITHSUNDEEP
htmlcsshtml-table
XamarinDevil
XamarinDevil

Reputation: 891

Equal space for td in html table

I have an html table like below and I want to make the td spaces equal. The first name Jean Claud Anita Goth is quite long and pushes the grade 5 away. The long names should be wrapped.

How it looks like now

 Name              Class
 Frew Amamde          5        
    Jean Claud Anita Goth       5

What I want

 Name              Class
 Frew Amamde          5        
 Jean Claud Anita     5
 Goth

HTML

<table class="table" id="tables">
  <thead>
    <tr>
      <th></th>
      <th>Name</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <td>Jean Claud Anita Goth</td>
    <td>grade 5</td>

    <td>Frew Amamde</td>
    <td>grade 5</td>

  </tbody>
</table>

Upvotes: 0

Views: 519

Answers (1)

Johannes
Johannes

Reputation: 67798

That's due to errors in the HTML code: The empty th element (to be erased) and the missing tr tags for the rows below the header (to be added):

th {
text-align: left;
}
td, th {
padding: 0px 10px;
}
<table class="table" id="tables">
  <thead>
    <tr>
      <th>Name</th>
      <th>Class</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jean Claud Anita Goth</td>
      <td>grade 5</td>
    </tr>
    <tr>
      <td>Frew Amamde</td>
      <td>grade 5</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions