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

Html – table th td must take max-width 200px then only it should wrap

.table_outer {
  width: 500px;
  overflow-x: auto; /* Allow horizontal scrolling */
}
table {
  width: 100%;
  min-width: max-content; /* Ensure table doesn't shrink below content width */
  table-layout: fixed; /* Enforce fixed width for cells */
  border-collapse: collapse;
  border: 1px solid black;
}
table th,
table td {
  border: 1px solid black;
  padding: 8px;
  max-width: 264px; /* Set max width for cells */
  white-space: normal; /* Allow wrapping */
  overflow-wrap: break-word; /* Wrap long words */
  word-break: break-word; /* Ensure word breaks */
  box-sizing: border-box; /* Include padding and border in width/height */
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>

    </style>
  </head>
  <body>
    <div class="table_outer">
      <table>
        <thead>
          <tr>
            <th>name</th>
            <th>role</th>
            <th>city</th>
            <th>city</th>
            <th>city</th>
            <th>city</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>raja shekar sivanna</td>
            <td>software engineer</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
          </tr>
          <tr>
            <td>hiran limbasia hiren</td>
            <td>software engineer</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
          </tr>
          <tr>
            <td>prajwal bhanasai katakam</td>
            <td>software engineer</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
          </tr>
          <tr>
            <td>prajwal bhanasai katakam</td>
            <td>software engineer</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
          </tr>
          <tr>
            <td>prajwal bhanasai katakam</td>
            <td>software engineer</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

table td is not taking the max width of 264px it taking less width and it getting wrap,
because table automatically trying to adjusting the width depends on the outer width of the table.
if outer width ot the table is 100% of the screen is if the table width more then taht it trying to adjust the cells width and wrap the content.
but i dont want to wrap the table before reach the content the max width of 264px it must take the max-width then there is a overflow it can wrap.

Tags:

2

Answers


  1. 0

    You have to change the layout from table into block for table element since table layout is default

    table {
    width: 100%;
    min-width: max-content; /* Ensure table doesn't shrink below content width */
    table-layout: fixed; /* Enforce fixed width for cells */
    border-collapse: collapse;
    border: 1px solid black;
    display: block;  /* MAGIC IS HERE */
    overflow-x: auto; /* Allow horizontal scrolling */
} 

    .table_outer {
  width: 500px;
  overflow-x: auto; /* Allow horizontal scrolling */
}
table {
  width: 100%;
  min-width: max-content; /* Ensure table doesn't shrink below content width */
  table-layout: fixed; /* Enforce fixed width for cells */
  border-collapse: collapse;
  border: 1px solid black;
  display: block;  /** Magic is HERE **/
}
table th,
table td {
  border: 1px solid black;
  padding: 8px;
  max-width: 264px; /* Set max width for cells */
  white-space: normal; /* Allow wrapping */
  overflow-wrap: break-word; /* Wrap long words */
  word-break: break-word; /* Ensure word breaks */
  box-sizing: border-box; /* Include padding and border in width/height */
}
    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>

    </style>
  </head>
  <body>
    <div class="table_outer">
      <table>
        <thead>
          <tr>
            <th>name</th>
            <th>role</th>
            <th>city</th>
            <th>city</th>
            <th>city</th>
            <th>city</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>raja shekar sivanna</td>
            <td>software engineer</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
          </tr>
          <tr>
            <td>hiran limbasia hiren</td>
            <td>software engineer</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
          </tr>
          <tr>
            <td>prajwal bhanasai katakam</td>
            <td>software engineer</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
          </tr>
          <tr>
            <td>prajwal bhanasai katakam</td>
            <td>software engineer</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
          </tr>
          <tr>
            <td>prajwal bhanasai katakam</td>
            <td>software engineer</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
            <td>hsr layout sector 6 banglore karnataka india</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
    Login or Signup to reply.
  2. 0 
    .table_outer {
width: 500px;
overflow-x: auto; /* Allow horizontal scrolling */
}

table {
width: 100%;
min-width: max-content; /* Ensure table doesn't shrink below content width */
border-collapse: collapse;
border: 1px solid black;
}

table th,
table td {
border: 1px solid black;
padding: 8px;
min-width: 264px; /* Set minimum width for cells */
white-space: normal; /* Allow wrapping */
overflow-wrap: break-word; /* Wrap long words */
word-break: break-word; /* Ensure word breaks */
box-sizing: border-box; /* Include padding and border in width/height */
}
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>

        </style>
      </head>
      <body>
        <div class="table_outer">
          <table>
            <thead>
              <tr>
                <th>name</th>
                <th>role</th>
                <th>city</th>
                <th>city</th>
                <th>city</th>
                <th>city</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>raja shekar sivanna</td>
                <td>software engineer</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
              </tr>
              <tr>
                <td>hiran limbasia hiren</td>
                <td>software engineer</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
              </tr>
              <tr>
                <td>prajwal bhanasai katakam</td>
                <td>software engineer</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
              </tr>
              <tr>
                <td>prajwal bhanasai katakam</td>
                <td>software engineer</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
              </tr>
              <tr>
                <td>prajwal bhanasai katakam</td>
                <td>software engineer</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
                <td>hsr layout sector 6 banglore karnataka india</td>
              </tr>
            </tbody>
          </table>
        </div>
      </body>
  </html>

    Removed table-layout: fixed; from the table selector and Changed max-width: 264px; to min-width: 264px; for table th, table td. This ensures that the cells will not be smaller than 264px, but they can grow larger if needed.

    With these changes, the cells will start at a minimum width of 264px and will only wrap if the content exceeds this width. If the table’s overall width goes beyond the table_outer width of 500px, horizontal scrolling will be enabled due to the overflow-x: auto; property

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search