In HTML, I have the issue explained in this example, which you can see in action here:
<html>
<style>
table, td {border:1pt solid; border-collapse:collapse;}
figure {margin:0pt}
</style>
<body>
<section style="border:1pt solid; width:600px;">
<p>This <section> has a surrounding border,
and has a fixed width of 600px solely for the purpose of the demonstration.
In the application I cannot predict what the width of the <section>
will be.</p>
<p>First table with no styling except border. Not what I want because the
third column is too wide. It is supposed to only be 25% of the ambient
<section> (which will of course be a larger percentage of the table
than 25%).</p>
<figure>
<table>
<tbody>
<tr>
<td>Word</td>
<td>Word</td>
<td>
<p>Paragraph with many many many many words.</p>
</td>
<td>Word</td>
</tr>
</tbody>
</table>
</figure>
<p>Second table with its third cell at 25%. Browser takes that to mean 25%
of the table width. Not what I want because the other cells grow to be too
wide.</p>
<figure>
<table>
<tbody>
<tr>
<td>Word</td>
<td>Word</td>
<td style="width:25%">
<p>Paragraph with many many many many words.</p>
</td>
<td>Word</td>
</tr>
</tbody>
</table>
</figure>
<p>Third table looks the way I want it to look. The 3rd column has width 25%
of the section width. However in this example I achieved that by knowing that
I had set the section width to 600px, and so I manually set that cell's width
to 150px. In my application I will not be able to predict the width of the
ambient section. I also want to achieve this result without specifying any
widths which would require predicting or knowing how wide "Word" will be.</p>
<figure>
<table>
<tbody>
<tr>
<td>Word</td>
<td>Word</td>
<td style="width:150px">
<p>Paragraph with many many many many words.</p>
</td>
<td>Word</td>
</tr>
</tbody>
</table>
</figure>
</section>
</body>
</html>
I'd like the <td> containing the <p> to have (an inline specified) width that is 25% of the <section> width, but let the other <td>s keep their natural width (the minimal width to contain their contents).
If I use width:25% on this one <td>, browsers (well, Firefox 47.0 at least) seems to find a width for that cell, then makes the <table> four times as wide, and makes the other three cells have the same width as the paragraph cell. This makes those other three cells too wide.
Is there a CSS or script technique I can use to achieve what I want?
Note: I cannot predict the width of the "Word"s. This is all automatically generated content. So I cannot manually adjust any percentages to get widths just right.
答案 0 :(得分：1)
Hmm I tried it with jQuery this time. It seems to be trouble when you set the td with a %. So I used jQuery to calculate a new width based on the width of figure (in px).
I also added a class .figure to the last table so it would only apply there. I assume you will be able to locate the specific table based on a css selector.
If you want to apply the same on several different tables, use a loop function. But for simplicity's sake I won't do that in this example. https://jsfiddle.net/qLyjj9sd/2/
HTML
<body>
<section style="border:1pt solid; width:600px;">
<p>This <section> has a surrounding border,
and has a fixed width of 600px solely for the purpose of the demonstration.
In the application I cannot predict what the width of the <section>
will be.</p>
<p>First table with no styling except border. Not what I want because the
third column is too wide. It is supposed to only be 25% of the ambient
<section> (which will of course be a larger percentage of the table
than 25%).</p>
<figure>
<table>
<tbody>
<tr>
<td>Word</td>
<td>Word</td>
<td>
<p>Paragraph with many many many many words.</p>
</td>
<td>Word</td>
</tr>
</tbody>
</table>
</figure>
<p>Second table with its third cell at 25%. Browser takes that to mean 25%
of the table width. Not what I want because the other cells grow to be too
wide.</p>
<figure>
<table>
<tbody>
<tr>
<td>Word</td>
<td>Word</td>
<td>
<p>Paragraph with many many many many words.</p>
</td>
<td>Word</td>
</tr>
</tbody>
</table>
</figure>
<p>Third table looks the way I want it to look. The 3rd column has width 25%
of the section width. However in this example I achieved that by knowing that
I had set the section width to 600px, and so I manually set that cell's width
to 150px. In my application I will not be able to predict the width of the
ambient section. I also want to achieve this result without specifying any
widths which would require predicting or knowing how wide "Word" will be.</p>
<figure class="figure">
<table>
<tbody>
<tr>
<td>Word</td>
<td>Word</td>
<td>
<p>Paragraph with many many many many words.</p>
</td>
<td>Word</td>
</tr>
</tbody>
</table>
</figure>
</section>
</body>
CSS
table, td {border:1pt solid; border-collapse:collapse;}
figure {margin:0pt}
Javascript --> jQuery
$(document).ready(function(){
var newWidth = $(".figure").width() * 0.25;
$(".figure td:nth(2)").width(newWidth);
});
答案 1 :(得分：0)
Example: https://jsfiddle.net/2uokvrtn/
Did you try:
HTML
<html>
<body>
<section>
<figure>
<table>
<tbody>
<tr>
<td>Word</td>
<td>Word</td>
<td>
<p>Paragraph with many many many many words.</p>
</td>
<td>Word</td>
</tr>
</tbody>
</table>
</figure>
</section>
</body>
</html>
CSS
td:first-child{
width: 25%;
border: 1px solid red;
}
table{
width: 100%;
}