All geek questions in one place

Tables: How to achieve the "normal" width td, but 100% of the width of the table?

Our site has tables containing data. We like the widths of the columns that we get with the regular ones table, but we like the bottom border tdto stretch the entire width of the page, as we get with CSS: table { width:100% }as seen in the table-width demo table , which looks like this:

redered image

Is it possible to achieve the same column width as with a regular (not 100% width) table in a table where border-border stretches the entire width?

And no, td { white-space: nowrap }in combination with an additional one width: 100% td(see the link above) it is not very good, since it is sometimes tdlong, so we want a tdregular table.

We need a solution that works at least in IE6-8 + FF.

Btw, is there a better way (tm) to display HTML snippets than linking to an external page? I can only show the source, but with HTML rendering is also very revealing.

This was originally published on Webmasters , but after the offer there I now (re) posted it here.

+3
source share
4 answers

I finally figured it out.

My first few attempts concerned floating <td>and <tr>s, but apparently I was on the right path, but had the wrong element.

, <tbody>. <table> - 100% , , <tbody> , <table>.

, <thead> <tfoot>, <tbody>.

:

table {
  width: 100%;
  border: 1px #000 solid;
}

tbody {
  float: left;
}

td {
  border: 1px #000 solid;
}
+3

CSS min-width max-width .

, , , , ( ), javascript .

jQuery :

$("#t1").width($("#t2").width());
$("#t1 tr td").each(function (i){
       $(this).width($($("#t2 tr:first td")[i]).width());
})

.

+1

, , , Firefox , , ...

<html>
<head>
<style type="text/css">
td{background-color:blue;}
div{border:1px solid red;position:absolute;width:100%;}
</style>
</head>
<body>

<table>
<tr>
<td>asdf<div></div></td><td>hello blah blah</td>
</tr>
<tr>
<td>lorem ipsum dolor si amet</td><td>testing</td>
</tr>

</body>
</html>
+1

, ,

, td {white-space: nowrap} : 100% td (. ) , tds , , tds .

. , , . , .

. 100% td . td, , , .

- :

table
{
  width:auto;
}

table tr td:last-child
{
  width:100%;
}
0

Source: https://habr.com/ru/post/1780114/

More articles:


All Articles