how to wrap data-column in table td

user_16424375 0
Viewed 88

I have a table which is responisve kind . The issue is if the column header name is big, its not wrapping and its over lapping.

Below is the screenshot and code HTML and CSS Checked style="word-wrap: break-word" and table-layout: fixed; width: 100%. But still it is not wrapping up. Any idea what we can change to fox this issue.

This page i am trying to see it in mobile.

<!DOCTYPE html>
<html>

<head>
  <style>
    @media only screen and (max-width: 760px),
    (min-device-width: 768px) and (max-device-width: 1024px) {
      table {
        width: 100%;
      }
      /* Force table to not be like tables anymore */
      table,
      thead,
      tbody,
      th,
      td,
      tr {
        display: block;
      }
      /* Hide table headers (but not display: none;, for accessibility) */
      thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
      }
      tr {
        border: 2px solid rgb(176 173 171);
      }
      td {
        /* Behave  like a "row" */
        border: none;
        /*border-bottom: 1px solid #eee; */
        position: relative;
        padding-left: 34%;
      }
      td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        /* Label the data */
        content: attr(data-column);
        border-color: darkgrey !important;
        color: #000;
        font-weight: bold;
        word-wrap: break-word;
      }
    }
  </style>
</head>

<body>
  <table>
    <thead>
      <tr>
        <th>Action</th>
        <template for:each={columns} for:item="col">
                        <th key={col.label} scope="col" style="word-wrap: break-word;">
                            <span class="slds-truncate">{col.label}</span>
                        </th>
                    </template>
      </tr>
    </thead>
    <tbody>
      <tr key={row.Id} class="slds-m-top_xx-small">
        <td scope="row" data-column="Actionnnnnnnnnnnnnnnnnnn" data-id={row.Id}>
          Test
        </td>
        <td scope="row" data-column="Name">
          Test1
        </td>
        <td scope="row" data-column="Shipping Address">
          Test2
        </td>
        <td scope="row" data-column="Industry">
          Test4
        </td>
        <td scope="row" data-column="Phone">
          Test3
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

enter image description here

css html
2 Answers

I have to get your problem, you're trying the wrong thing for the table. You have set "display: block;" to all the table elements so that's why this is wrapping up to the other column. Because this is not a table anymore if you want it to react like a table you have to remove "display: block;" see attached screenshotenter image description here

Hope this Works!

user_114208060

You can not achieve nice word breaks with position: absolute. But you can use display: flex for table rows like this.

@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
  table {
    width: 100%;
  }
  tr {
    display: flex;
    flex-direction: column;
  }
  /* Hide table headers (but not display: none;, for accessibility) */
  thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  tr {
    border: 2px solid rgb(176 173 171);
  }
  td:before {
    content: attr(data-column);
    font-weight: bold;
    word-wrap: break-word;
    width: 20%;
    display: inline-block;
  }
}
<table>
  <thead>
    <tr>
      <th>Action</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-column="Actionnnnnnnnnnnnnnnnnnn">
        Test
      </td>
      <td data-column="Name">
        Test1
      </td>
      <td data-column="Shipping Address">
        Test2
      </td>
      <td data-column="Industry">
        Test4
      </td>
      <td data-column="Phone">
        Test3
      </td>
    </tr>
  </tbody>
</table>

Also you can wrap table cells content by div (or span) to get positioning flexible options inside of table cells (if you want some).

user_75239690
Related