No break between span tags in th-CodePudding

I have a table with sorting arrows in the table header. Each th element has a span for text and a span for the sorting arrows. I want the text in the left span to wrap dynamically and the span with the sorting arrows to stay in the top right of the th.

CSS:

th {
    border: 1px solid black;
}
.sort {
    float: right;
}
.sort-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}
.sort-arrow.asc {
    border-bottom: 5px solid #1F2B39;
    margin-bottom: 4px;
    margin-top: 3px;
}
.sort-arrow.desc {
    border-top: 5px solid #1F2B39;
    margin-top: 4px;
    margin-bottom: 3px;
}

HTML:

<table>
    <thead>
        <tr>
            <th>
                <span>A pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty long text.</span>
                <span >
                    <div ></div>
                    <div ></div>
                </span>
            </th>
            <th>
                <span>Short</span>
                <span >
                    <div ></div>
                    <div ></div>
                </span>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td></tr>
    </tbody>
</table>

CodePudding user response：

Using position: relative on the parent and position: absolute on the children should do the job. Then you can place them by using top: 0 and right: 0 and it will put them in the top-right corner !

In order to have the text wrapping, simply make your containers a fix width (ou with percentages), the text will wrap because it is it's natural way of working.

And as @CBroe said in the comment, ID's have to be unique !

CodePudding user response：

You can create a div inside th and give that div a display of flex, and for the elements ot go to the top of th you can use vertical-align: top;

th,
td {
  border: 1px solid black;
  vertical-align: top;
  text-align:left;
}

thead,
tbody {
  background: yellow;
}

.row {
  display: flex;
  align-items: flex-start;
}



.sort-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.sort-arrow.asc {
  border-bottom: 5px solid #1F2B39;
  margin-bottom: 4px;
  margin-top: 3px;
}

.sort-arrow.desc {
  border-top: 5px solid #1F2B39;
  margin-top: 4px;
  margin-bottom: 3px;
}

<table>
  <thead>
    <tr >
      <th>
        <div >
          <span>A pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty long text.</span>
          <span >
                    <div ></div>
                    <div ></div>
                </span>
        </div>
      </th>
      <th >
      <div >
        <span>Short</span>
        <span >
                    <div ></div>
                    <div ></div>
                </span>
                </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
    </tr>
  </tbody>
</table>

CodePudding user response：

For laying out tables, I prefer CSS Grid, but you don't show your full table structure. You can easily use flex on the table row and table head as shown, but your results may vary depending on what's in the table body.

table {
  table-layout: fixed;
  border-collapse: collapse;
}

th, td {
  border: 1px solid #ccc;
  padding: 1rem;
  vertical-align: top;
}

th:nth-child(1), td:nth-child(1) {
  width: 80%;
} 

th:nth-child(2), td:nth-child(2) {
  width: 20%;
} 

.header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

tr:last-of-type > td {
  border-bottom: 2px solid #aaa;
}

.sort-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.sort-arrow.asc {
  border-bottom: 5px solid #1F2B39;
  margin-bottom: 4px;
  margin-top: 3px;
}

.sort-arrow.desc {
  border-top: 5px solid #1F2B39;
  margin-top: 4px;
  margin-bottom: 3px;
}

<table>
  <thead>
    <tr>
      <th>
        <div >
          <span>A pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty pretty long text.</span>
          <span >
            <div ></div>
            <div ></div>
          </span>
        </div>
      </th>
      <th>
        <div >
          <span>Short</span>
          <span >
            <div ></div>
            <div ></div>
          </span>
        </div>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Test</td>
      <td>Test</td>
    </tr>
    <tr>
      <td>Test</td>
      <td>Test</td>
    </tr>
  </tbody>
</table>