How do you make a table column that never wraps and is auto width?

user_307438 0
Viewed 253

I need to create a two-column full-width table where:

  • Column 1 wraps when it needs to
  • Column 2 never wraps and fills any empty space

See a visual example here:

enter image description here

I'm having a lot of trouble figuring this out... here's where I'm up to:

table {
  width: 100%;
}

.col-2 {
  white-space: nowrap;
  width: 60%;
  text-align: right;
}

/* Below is arbitrary example CSS, not part of solution */
.container {
  width: 250px;
}
td {
  background: lightblue;
}
<h4>Example A</h4>
<div class="container">
  <table>
    <tr>
      <td class='col-1'>Not much text</td>
      <td class='col-2'>Column 2</td>
    </tr>
  </table>

  <h4>Example B</h2>
    <table>
      <tr>
        <td class='col-1'>This has a lot of text that wraps</td>
        <td class='col-2'>Column 2</td>
      </tr>
    </table>
</div>

Notice that col-1 isn't expanding because of the width: 60% on col-2. If I remove that, then col-1 defaults to taking up all the space, which breaks Example B.

I can get this working with flexbox, but then the columns don't line up properly when col-1 wraps... so I think it needs to remain a table.

Any ideas would be massively appreciated. Thank you!!

css html
8 Answers

CSS grid should do it:

div {
  display: grid;
  width: 250px;
  grid-gap: 2px;
  grid-template-columns: auto 1fr;
}

.col-2 {
  white-space: nowrap;
  text-align: right;
}

p {
  background: hotpink;
  margin: 0;
}
<h4>Example A</h4>

<div>
  <p class='col-1'>Not much text</p>
  <p class='col-2'>Column 2</p>
  <p class='col-1'>row2</p>
  <p class='col-2'>Column 2</p>
</div>

<h4>Example B</h4>
<div>
  <p class='col-1'>This has a lot of text that wraps</p>
  <p class='col-2'>Column 2</p>
  <p class='col-1'>row2</p>
  <p class='col-2'>Column 2</p>
</div>

user_86203330

You can add "white-space: nowrap" to td because of this it will never wraps and it will take is auto width.

table {
  width: 100%;
}

.col-2 {
  white-space: nowrap;
  width: 60%;
  text-align: right;
}

/* Below is arbitrary example CSS, not part of solution */
.container {
  width: 250px;
}
td {
  background: lightblue;white-space: nowrap;
}
<h4>Example A</h4>
<div class="container">
  <table>
    <tr>
      <td class='col-1'>Not much text</td>
      <td class='col-2'>Column 2</td>
    </tr>
  </table>

  <h4>Example B</h2>
    <table>
      <tr>
        <td class='col-1'>This has a lot of text that wraps</td>
        <td class='col-2'>Column 2</td>
      </tr>
    </table>
</div>

user_143049480

enter image description here

Is this The output You are looking For?

if this is it then i simply as you said i removed width but col-2 took up the blank space as required

table {
  width: 100%;
}

.col-2 {
  white-space: nowrap;
  padding-left: 5px!important;
  text-align: right;
}

/* Below is arbitrary example CSS, not part of solution */
.container {
  width: 250px;
}
td {
  background: lightblue;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
  <h4>Example A</h4>
<div class="container">
  <table>
    <tr>
      <td class='col-1'>xx</td>
      <td class='col-2'>Column 2</td>
    </tr>
    <tr>
      <td class='col-1'>T</td>
      <td class='col-2'>Column 2</td>
    </tr>
  </table>

  <h4>Example B</h2>
    <table>
      <tr>
        <td class='col-1'>This has a lot of text that wraps</td>
        <td class='col-2'>Column 2</td>
      </tr>
      <tr>
        <td class='col-1'>xx</td>
        <td class='col-2'>Column 2</td>
      </tr>
    </table>
</div>
</body>
</html>

user_152078880

Here is a flexbox approach to consider:

.table {
  display: flex;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
}

.col {
  background-color: lightblue;
  padding: 5px;
  margin: 2px;
  height: 50px;
}

.col-2 {
  white-space: nowrap;
  align-items: stretch;
  flex-grow: 1;
}

.col {
  display: flex;
  align-items: center;
}

.col-2 .col {
  justify-content: flex-end;
}

/* Below is arbitrary example CSS, not part of solution */
.container {
  width: 250px;
}
<h4>Example A</h4>
<div class="container">
  <div class="table">
    <div class="column col-1">
      <p class='col'>Row 1</p>
      <p class='col'>Row Two</p>
    </div>
    <div class="column col-2">
      <p class='col'>Column 2</p>
      <p class='col'>Column 2</p>
    </div>
  </div>

  <h4>Example B</h2>
    <div class="table">
      <div class="column col-1">
        <p class='col'>Automatically wraps when there is a lot of text</p>
        <p class='col'>Row Two</p>
        <p class='col'>Row Three</p>
      </div>
      <div class="column col-2">
        <p class='col'>Column 2</p>
        <p class='col'>Column 2</p>
        <p class='col'>Column 2</p>
      </div>
    </div>
</div>

It does require a height to be set on the .col or else the rows won't be of equal height. A CSS grid is probably the way to go though.

user_87227540 
<style>
.col-1{width:100%;white-space: nowrap;}
</style    
<h4>Example A</h4>
    <div class="container">
    <table>
       <tr>
         <td class='col-1'>Not much text</td>
         <td class='col-2'>Column 2</td>
       </tr>
      </table>
    
      <h4>Example B</h2>
        <table>
          <tr>
            <td class='col-1'>This has a lot of text that wraps</td>
            <td class='col-2'>Column 2</td>
          </tr>
        </table>
    </div>
user_152572690

Here is short example by using just bootstrap4 flex property

Complete running Example: here

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<h3> Sample1 </h3>

<div class="container py-2">
    <div class="d-flex border">
        <div class="pl-4 w-25 d-flex nowrap justify-content-center">Short text line1 </div>
        <div class="pr-4 d-flex flex-grow-1 border  justify-content-end"> Short text line2 </div>
    </div>
</div>

<h3> Sample2 </h3>
<div class="container py-2">
    <div class="d-flex ">
        <div class="w-25 d-flex nowrap">long text long text long textlong text long textlong text long textlong textt</div>
        <div> Short text </div>
    </div>
</div>

user_11890700

You can use bootstrap to solve this. make grid with class as (col-md-6 + col-md-6). this will fix the size of both columns to 50% and will not exceed no matter how much the content is.

user_122686340 
<h4>Example A</h4>
<div class="container">
<table>
   <tr>
     <td class='col-1'  style="white-space: nowrap;">Not much text</td>
     <td class='col-2'>Column 2</td>
   </tr>
  </table>

  <h4>Example B</h2>
    <table>
      <tr>
        <td class='col-1' style="white-space: nowrap;">This has a lot of text that 
            wraps</td>
        <td class='col-2'>Column 2</td>
      </tr>
    </table>
</div>
user_152572690
Related