CODEWITHSUNDEEP
cssresponsive
GGirotto
GGirotto

Reputation: 1105

Wrap text inside table based on screen width

I want to wrap a single-line text inside a table considering the screen width resize. The table occupy 100% of the screen width and I want to wrap the text in one line only (wrapping with ellipsis if it overflow the content width) once the window is resized. I could only achieve a text wrap when specifying a fixed width in pixels. JSFiddle: https://jsfiddle.net/4vo7p58c/5

The problem is that without a fixed width on td element, it doesn't wrap the text, and once I horizontally resize the window, the row breaks into two lines instead wrapping the text to fit the screen width

Upvotes: 1

Views: 1864

Answers (1)

Manjuboyz
Manjuboyz

Reputation: 7066

You are almost there with you code,

td is by default table-cell element which is typically different from inline-block or block.

If you want to use ellipsis value then you should have a width for td this will make sure the content remains overflow and use either display:block/inline-block; for your cause, it works for both.

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid red;
  table-layout: fixed;
}

th {
  text-align: left;
  border-bottom: 1pt solid #4C4C4C;
  border-right: 1pt solid #4C4C4C;
  padding: 8px;
  width: 20%;
}

td {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  border: 1px solid #000000;
  word-wrap: break-word;
}
<div class="External">
  <table>
    <tr>
      <th>First Element</th>
      <td>Text</td>
    </tr>
    <tr>
      <th>Second Element</th>
      <td>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum</td>
    </tr>
    <tr>
      <th>Third Element</th>
      <td>Text</td>
    </tr>
    <tr>
      <th>Fourth Element</th>
      <td>Text</td>
    </tr>
  </table>
</div>

Upvotes: 2

Related Questions