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

Html – How can I ensure extra elements or symbols stay within table cells without overflowing using CSS?

<tr>
    <td width="100px">Base pan loading and Damper fixing</td>
    <td width="350px" height="200px" style="position: relative">
      <div class="main">
        <div class="lame">
          <div class="circle">1</div>
         
        </div>
        
        <div
          style="
            display: flex;
              display: flex;
flex-direction: column;
gap: 8rem;
position: absolute;
top: 113px;
left: 100%;
          "
        >
          <div class="container">
            <div class="h2"></div>

            <div class="v4"></div>

–>

            <div class="triangle-text2">Damper, Compressor</div>

            <div class="triangle-down2" data-content="3"></div>
          </div>
    


          
        
    </td>

    <td width="100px">Hand gloves Safety Shoe Ear Plugs</td>
    <td width="50px"><t/d></td>

    <td width="200px">
      <ol style="padding-left: 20px">
        <li>Check base pan paint pill off</li>
        <li>Check base pan paint pill off</li>
         <li>Check base pan paint pill off</li>
        

      </ol>
    </td>

    <td width="60px" style="text-align: center">Visual</td>

    <td width="50px" style="text-align: center">All</td>

    <td width="50px" style="text-align: center">Assembly Worker</td>

    <td width="90px" style="text-align: center">
      Problem occurs, Inform to Supervisor and f/up
    </td>
  </tr>--------> html code of the structure which i am adding inside the cell

my concern is when i add the more structures i mean when i simply copy paste them they are going out of the cell of table … im expecting the funtionality where i can add more structures and the table cell will increase dynamically and i have to use only html and css to acieve this

Tags:

2

Answers


  1. 0

    use word-break: break-word to make long words break within the table cell
    check the following:

     table {
      width: 100%;
      border-collapse: collapse;
    }
    td {
      border: 1px solid #000;
      vertical-align: top;
      padding: 10px;
      word-break: break-word;
      overflow-wrap: break-word;
    }
    .main {
      display: flex;
      flex-direction: column;
      gap: 8rem;
    }
    .container {
      position: relative;
    }
    .triangle-text2 {
      margin-bottom: 1rem;
    }
     <table>
    <tr>
      <td width="100px">Base pan loading and Damper fixing</td>
      <td width="350px">
        <div class="main">
          <div class="lame">
            <div class="circle">1</div>
          </div>
          <div class="container">
            <div class="h2"></div>
            <div class="v4"></div>
            <div class="triangle-text2">Damper, Compressor</div>
            <div class="triangle-down2" data-content="3"></div>
          </div>
        </div>
      </td>
      <td width="100px">Hand gloves Safety Shoe Ear Plugs</td>
      <td width="50px"></td>
      <td width="200px">
        <ol style="padding-left: 20px">
          <li>Check base pan paint pill off</li>
          <li>Check base pan paint pill off</li>
          <li>Check base pan paint pill off</li>
        </ol>
      </td>
      <td width="60px" style="text-align: center">Visual</td>
      <td width="50px" style="text-align: center">All</td>
      <td width="50px" style="text-align: center">Assembly Worker</td>
      <td width="90px" style="text-align: center">
        Problem occurs, Inform to Supervisor and f/up
      </td>
    </tr>
  </table>
    Login or Signup to reply.
  2. 0

    So in order to archive this you can use CSS Attributes which controls both layout and overflow of the table cells.

    So the steps in order to follow this is as, Just make the table-layout is to fixed which then will fix the width of the columns and the cells. Use the code for the fix as below in css.

    table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

    Then as for the text we can use overflow. use the attribute which is called overflow-x and overflow-y to control both the x and y coords to the width and the height and set them to values in order to fix the overflow of the cells. The code below can be used for this.

    td {
  overflow: hidden;
  word-wrap: break-word;
  white-space: normal;
}

    Try applying these styles into the table and let me know. Thanks.

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

Back To Top
Search