Question 184161 in Html Question posted in
Some basic documentation can be found here.

Html – For a 100% table, how to spread elements horizontally evenly inside <td>?

For example, I have a table which the first column has some elements with different length:

<table border="1" style="text-align:center;width:100%;">
  <tr><td><span>a</span></td><td>1</td></tr>
  <tr><td><span>a</span><span>a</span></td><td>1</td></tr>
  <tr><td><span>a</span><span>a</span><span>a</span></td><td>1</td></tr>
  <tr><td><span>a</span><span>a</span><span>a</span><span>a</span><td>1</td></tr>  
<table>

How to add space to elements so that the elements in <td> is evenly distributed?

I tried:

span{
  display:inline-block;
}

.container {
  display: flex;
}
.container.space-around {
  justify-content: space-around;
}
.spaceBetween{
  display:space-between;
}
<table border="1" style="text-align:center;width:100%;">
  <tr class="container space-around"><td class="spaceBetween"><span>a</span></td><td>1</td></tr>
  <tr class="container space-around"><td class="spaceBetween"><span>a</span><span>a</span></td><td>1</td></tr>
  <tr class="container space-around"><td class="spaceBetween"><span>a</span><span>a</span><span>a</span></td><td>1</td></tr>
  <tr class="container space-around"><td class="spaceBetween"><span>a</span><span>a</span><span>a</span><span>a</span></td><td>1</td></tr>  
</table>

but not working.

Tags:

2

Answers


  1. 0 
    .spaceBetween {
  display: flex;
  justify-content: space-around;
}
    <table border="1" style="text-align:center;width:100%">
  <tr class="container space-around">
    <td class="spaceBetween"><span>a</span></td>
    <td>1</td>
  </tr>
  <tr class="container space-around">
    <td class="spaceBetween"><span>a</span><span>a</span></td>
    <td>1</td>
  </tr>
  <tr class="container space-around">
    <td class="spaceBetween"><span>a</span><span>a</span><span>a</span></td>
    <td>1</td>
  </tr>
  <tr class="container space-around">
    <td class="spaceBetween"><span>a</span><span>a</span><span>a</span><span>a</span></td>
    <td>1</td>
  </tr>
</table>

    You just didn’t place your flex in the right place and were completely breaking the table. I’ve changed it so the flex is applied to the cell.

    Login or Signup to reply.
  2. 0

    To evenly distribute the elements in the first column of a table, you can use CSS to apply a "text-align: justify" property to the cells in that column. Here’s an example of how you can achieve this:

    html
<style>
  .distribute {
    text-align: justify;
  }
</style>

<table>
  <tr>
    <td class="distribute">Element 1</td>
    <td>Value 1</td>
  </tr>
  <tr>
    <td class="distribute">Element 2</td>
    <td>Value 2</td>
  </tr>
  <tr>
    <td class="distribute">Element 3</td>
    <td>Value 3</td>
  </tr>
  <!-- Add more rows as needed -->
</table>

    By applying the "distribute" class to the cells in the first column (in this case, the elements), the "text-align: justify" property will evenly distribute the content in each cell. In this way, the elements will be spaced to fill the entire width of the column. Don’t forget to adjust the structure and content of the table to suit your specific needs.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search