How to make <td> wrap but not left or right stretchable

TIA ,
I tried

        td {
         border: 1px solid gray;
         word-wrap: break-word;
         vertical-align: top;
 		max-width: 49%;
       }

But [td] still stretches


<!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">
 
    <title>
file:///C:/PureBasic-myApps/vmProjects/BUTTONS/Line-By-Line/Line-By-Line-Folder/Create-INDEX/CompareStuff_Copy(1).html
https://vmars.us/ShowMe/CompareStuff_Copy(1).html
    </title>

    <style>
      html,
      body {
        margin: 1em;
      }
table {
  width: 800px; /* 800px, 1000px - it's up to you - instead of 100% */
  font: 400 .8rem/1.1 system-ui, monospace;
  text-align: left;
  border-collapse: collapse;
  margin-bottom: 1rem;
  margin-inline: auto; /* table centered horizontally */
}
      th, td {
        width: 49%;
        padding: .5rem;
      }
      td {
        border: 1px solid gray;
        word-wrap: break-word;
        vertical-align: top;
		max-width: 49%;
      }
    </style>
  </head>
  <body>
<h4 style="text-align:center;">CompareStuff_Copy(1).html</h4>
    <table contenteditable>
      <tbody>
        <tr>
          <td>
            1 
          </td>
          <td>
            2
          </td>
        </tr>
        <tr>
          <td>
            3
          </td>
          <td>
            4
          </td>
        </tr>
        <tr>
          <td>
            5
          </td>
          <td>
            6
          </td>
        </tr>
      </tbody>
    </table>

  </body>
</html>
To see it in action it copy this:
 [https://www.purebasic.com/documentation/regularexpression/matchregularexpression.html](https://www.purebasic.com/documentation/regularexpression/matchregularexpression.html ) 

 into here:
 [https://vmars.us/ShowMe/CompareStuff_Copy(1).html]

Pls , how can I fix this ?
Thanks for your Help…

You have a table of a fixed width of 800px so all cells must add up to 800px no matter what you size them. If content stretches a cell then the other cell would change size or in the table-layout:fixed algorithm the content would overflow and cells would remain at the specified size (assuming they fit the table as mentioned).

You can force the widths to be 50% with table-layout:fixed algorithm but then you have to control the wrapping of the content within that cell,

In your example add table-layout:fixed to the table element. If you are using the pre element you will also need to use white-space: pre-wrap; on the pre element.

pre {
  white-space: pre-wrap;
}

I’ve tidied up your code very quickly (there may be typos) and removed the deprecated font tags (use spans if needed).

I’m assuming this is roughly what you were trying to do.

Other unbroken chunks of text (such as urls etc) would need to use a word breaking structure.

No that didn’t do the trick .
This seems to give me what I need .

```
<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex; /* Use flexbox to create a row layout */
    }

    .box {
      flex: 1; /* Make the boxes stretch equally within the container */
      min-width: 200px; /* Set a fixed minimum width for the boxes */
      border: 1px solid black;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box" contenteditable="true">
      <!-- Content of the first div -->
    </div>
    <div class="box" contenteditable="true">
      <!-- Content of the second div -->
    </div>
  </div>
</body>
</html>
```

Thanks

So my demo wasn’t doing what you asked for?

I don’t see any td tags in there at all ?

I assumed you were tied to the html mark up you presented especially as the thread’s title was about stretching a td ?

Never mind though glad you got it sorted. :wink:

Hi Paul ;
Ya , I did change horses in midstream
The reason is that the code didn’t make each [td] a horizontal fixed length . Whatever was pasted in there
caused the [td] to stretch to accommodate the width of the stuff pasted .
I had been working on this ‘table approach’ for quite a while , before Posting it , and just got frustrated so I tried a new approach .

Thanks for your continued support ,
Vern…

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.