Wrapping HTML Table Rows in <A> Tags

Wrapping HTML table rows in a tags

Edit 2021:

It seems nowadays there's better options that are more semantic and more screen-reader-friendly. Check out e.g. Jans solution.

Original answer:

as a link in each td is not a good alternative and using js is a bit dirty, here is another html/css approach:

HTML:

<div class="table">
    <a class="table-row" href="/mylink">
        <div class="table-cell">...</div>
        <div class="table-cell">...</div>
        <div class="table-cell">...</div>
    </a>
</div>

CSS:

.table { display:table; }
.table-row { display:table-row; }
.table-cell { display:table-cell; }

Wrap table row to the next line

Change the cells to inline blocks:

#table_id {
  display: block;
}

#table_id td {
  display: inline-block;
}

td {
  background: green
}

<table id="table_id">
  <tr>
    <td>testtesttesttest</td>
    <td>testtesttesttest</td>
  </tr>
</table>

how to wrap data-column in table td

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>

Wrap table rows without breaking HTML validation?

As @KevinB writes in a comment, a tbody element is really the only way to group table rows in a wrapper element. In static markup, this could be:

<table class="form-table">

    <tbody class="bg">
        <tr valign="top">
            <th scope="row">Hide Menu Background:</th>
            <td>
                <input type="checkbox" value="value1" name="name1"/>
            </td>
        </tr>
        <tr valign="top">
            <th scope="row">
                Menu Background:
            </th>
            <td>
                <input type="file" name=""/>
            </td>
        </tr>
    </tbody>    

    <tbody class="other">
        <tr  valign="top">
            <th  scope="row">Hide Sidebar:</th>
            <td>
                <input type="checkbox" value="value2" name="name2"/>
            </td>
        </tr>
        <tr valign="top">
            <th scope="row">Hide Site Title:</th>
            <td>
                <input type="checkbox" value="value3" name="name3" />
            </td>
        </tr>
    </tbody>
</table>

The class attributes on tbody elements are really not needed, but they can be used to make styling a little easier.

Alternatively, you might decide that the two parts are not really logically parts of the same table, and use two separate table elements. This is really the only way if you want column 2 to start at different positions.

Wrap long HTML tables to next line

What you need to decide is what behavior happens with the next row as it flows down to the next. Is it adding a new orphaned row, ie:

#container {
    width: 95%;
    max-width: 646px;
    margin: 10px auto;
    border: 5px solid black;
    padding: 5px;
}
#container .row {
    border: 1px solid green;
    border-left: 0;
    border-top: none;
    margin: 0;
    padding: 0;
}
#container br {
    clear: both;
}
#container .block {
    border: 1px solid blue;
    border-bottom: 0;
    border-right: 0;
    float: left;
    width: 128px;
}

<div class="row">
    <div class="block">
        <img src="http://goo.gl/UohAz"/>
    </div>
    <div class="block">
        <img src="http://goo.gl/UohAz"/>
    </div>
    <div class="block">
        <img src="http://goo.gl/UohAz"/>
    </div>
    <div class="block">
        <img src="http://goo.gl/UohAz"/>
    </div>
    <div class="block">
        <img src="http://goo.gl/UohAz"/>
    </div>
     <br/>
</div>

http://jsfiddle.net/userdude/KFFgf/

You'll see the overflow becomes a new row with the leftover and blank space on the right.

If you just want a "rolling" block, you can:

http://jsfiddle.net/userdude/KFFgf/1/

Where the rows just block down in flow. You could put <br/> tags in there to create hard row breaks if necessary. Not sure if that helps and haven't tested across browsers, but that's what I think you have in mind.

How to force table cell td content to wrap?

Use table-layout:fixed in the table and word-wrap:break-word in the td.

See this example:

<html>
<head>
   <style>
   table {border-collapse:collapse; table-layout:fixed; width:310px;}
   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
   </style>
</head>

<body>
   <table>
      <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>
   </table>
</body>
</html>

DEMO:

table {border-collapse:collapse; table-layout:fixed; width:310px;}       table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}

       <table>          <tr>             <td>1</td>             <td>Lorem Ipsum</td>             <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>          </tr>          <tr>             <td>2</td>             <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>             <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>          </tr>          <tr>             <td>3</td>             <td></td>             <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>          </tr>       </table>    

How do I use a code tag in a table that does not wrap?

There are two ways of doing it, each with its own tradeoffs but both produce the same result.

1. Use <pre>

Insert <pre> into the <code>. Note that this is not the standard way of writing HTML. According to the spec, the <code> should be inside <pre> instead. This works for a Docusaurus site.

<td><code>organizationName</code></td>

would instead be written as:

<td><code><pre>organizationName</pre></code></td>

2. Add custom CSS targeting <code> [RECOMMENDED]

Add the CSS

code.block {
  white-space: nowrap;
}

and do:

<td><code class="block">organizationName</code></td>

The second way is cleaner and what I settled on. Since I only faced the problem when <code> was used as the first column in a table, I used the following CSS, which is also what Bootstrap website uses.

table td:first-child > code {
  white-space: nowrap;
}

The benefit of doing the above is that I can use Markdown syntax for my table and I do not have to add custom classes to it:

| `organizationName` | The GitHub user ... |

Final Result

---

Related Topics