CODEWITHSUNDEEP
htmlcsshtml-table
Matt
Matt

Reputation: 8942

Centering span in table body

I am trying to center span in tbody, but I am not sure how to do that and I don't know if this structure is valid if I don't include a tr and td elements.

html

<table class="table">
   <thead>
      <tr>
         <th>Rank</th>
         <th>
            <div>Name</div>
         </th>
         <th>
            <div>Age</div>
         </th>
         <th>Price</th>
      </tr>
   </thead>
   <tbody>
         <div><span>You haven’t added any data yet</span></div>
   </tbody>
</table>

css

tbody div {
  display: table-row;
}

tbody div span{
  display: block;
  text-align: center;
  width: 100%;
}

enter image description here

Upvotes: 1

Views: 1066

Answers (2)

yılmaz
yılmaz

Reputation: 1826

By convention you should include tr and th as well within tbody

You can use colspan to merge columns and text-align:center style to center text.

<table class="table" style="width:100%">
   <thead>
      <tr>
         <th>Rank</th>
         <th>
            <div>Name</div>
         </th>
         <th>
            <div>Age</div>
         </th>
         <th>Price</th>
      </tr>
   </thead>
   <tbody>
      <tr> 
         <td colspan="4" style="text-align: center;">You haven’t added any data yet</td>
      </tr>
   </tbody>
</table>

Upvotes: 0

Neil
Neil

Reputation: 11889

Use colspan:

<table class="table">
   <thead>
      <tr>
         <th>Rank</th>
         <th>
            <div>Name</div>
         </th>
         <th>
            <div>Age</div>
         </th>
         <th>Price</th>
      </tr>
   </thead>
   <tbody>
      <tr> 
         <td colspan="3">You haven’t added any data yet</td>
      </tr>
   </tbody>
</table>

Upvotes: 2

Related Questions