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

<th> element is using more than expected width because of <span> inside of it – Html

I’m working on a table and inside the elements I’m rendering a with and inside, based on if that column is sortable or not. The problem I’m running into is that the that contain the are using much more width than the ones that do not when the is like 15px wide.

Here’s a draft of my code.

.table{
  position: relative;
  margin-top: 2rem;
  width: 100%;
}

.table thead{
  position: relative;
}

.table th{
  font-size: .9rem;
  text-align: left;
  padding: 1rem 0;
}

.table th span{
  margin-left: .4rem;
}

.table th span svg{
  width: 1rem;
  vertical-align: bottom;
}
<table class="table">
  <thead>
   <tr>
    <th>       // This th has too much width
     thead1
     <span>
      <svg>...</svg>
     </span>
    </th>

  <th>thead2</th>  // This th is ok.
   </tr>
  
  

</thead>
</table>

I’m expecting table to span the full width of it’s parent element and the <th> elements to have an unset width each using a somewhat consistent space.

This is what my table looks like

This is what I want to achieve

I have tried to set table-layout: fixed and that solved the issue but I don’t really want my columns to have a fixed width.

I have tried to do some regular manipulation with css like adding display: flex to the parent and flex-grow: 1 for the elements, but that makes everything worse.

I’m pretty lost here…

Tags:

2

Answers


  1. 0

    you can use the css width to solve it:

    and you should use tr also

         <table class="table">
 <thead>
<tr>
  <th style="width:50%;">
   thead1
   <span>
    <svg>
    </svg>
   </span>
  </th>

  <th style="width:50%;">thead2</th>
</tr>
 </thead>
</table>
    Login or Signup to reply.
  2. 0

    First you need to add table-layout: auto; in your table style.

    Then, since the svg tag create an space even you didn’t set up the style, you need to set it’s width:0; and add min-width:100%; So your svg tag now have no margin or padding.

    Set up the width and height of your svg with rect.

    Here, I made these samples and hoping it can help you in some ways.

    .table {
  border-collapse: collapse;
  table-layout: auto;
  width: 100%;
} 
tr, th, td{
  margin: 0;
  padding: 0;
  left: 0;
  border: 1px solid black;
}
svg{
  display: block;
  width:0;
  min-width:100%;
}
    <h1> Table 1 </h1>
<table class="table">
  <thead>
    <tr>
      <th>  
        thead1 // This th has too much width
        <span>
          <svg height="1rem">
            <rect x="0%" y="25%" width="100%" height="50%" fill="darkred"/>
          </svg>
        </span>
      </th>
      <th>thead2</th>
    </tr>
  </thead>
</table>
  
<h1> Table 2 </h1>
<table class="table">
  <thead>
    <tr>
      <th>
        thead1
        <span>
          <svg height="1rem">
            <rect x="0%" y="25%" width="100%" height="50%" fill="darkblue"/>
          </svg>
        </span>
      </th>
      <th>thead2  // This th2 is now the bigger width.</th>
    </tr>
  </thead>
</table>
  
<h1> Table 3 </h1>
<table class="table">
  <thead>
    <tr>
      <th>
        thead1 // See, this th1 and th2 is now equal.
        <span>
          <svg height="1rem">
            <rect x="0%" y="25%" width="100%" height="50%" fill="darkgreen"/>
          </svg>
        </span>
      </th>
      <th>
        thead2 // Yes, even th1 have span and svg.
      </th>
    </tr>
  </thead>
</table>

<h1> Table 4 </h1>
<table class="table">
  <thead>
    <tr>
      <th>
        thead1
        <span>
          <svg height="1rem">
            <rect x="0%" y="25%" width="100%" height="50%" fill="darkgreen"/>
          </svg>
        </span>
      </th>
      <th>
        thead2
      </th>
      <th>
        thead3
        <span>
          <svg height="1rem">
            <rect x="0%" y="25%" width="100%" height="50%" fill="purple"/>
          </svg>
        </span>
      </th>
      <th>
        thead4
      </th>
      <th>
        thead5
        <span>
          <svg height="1rem">
            <rect x="0%" y="25%" width="100%" height="50%" fill="black"/>
          </svg>
        </span>
      </th>
      <th>
        thead6
        <span>
          <svg height="1rem">
            <rect x="0%" y="25%" width="100%" height="50%" fill="gray"/>
          </svg>
        </span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content 1</td>
      <td>Content 2</td>
      <td>Content 3</td>
      <td>Content 4</td>
      <td>Content 5</td>
      <td>Content 6</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search