Question

给出下表：

<table width="100%">
  <tr>
    <td id="td1"></td>
    <td id="td2"></td>
    <td id="td3"></td>
    <td id="td4"></td>
  </tr>
</table>

有人可以告诉我如何使td1自动适应内容，但使td1的宽度+ td2的宽度等于父对象的宽度的50％吗？

Answer 1

正如您说的那样，您可以完全控制标记，我建议您使用div和display: flex;，而不要使用table。使用JS似乎对imo有点矫kill过正。（注：IE11 limitation）

我已经建立了一个简短的示例，说明可以帮助您入门的内容，但我并不是100％希望您td2和td4采取的行为。

但是，如果要为这些元素设置最大宽度，则可以使用something like this：

#td2 {
    flex-grow: 0; /* do not grow   - initial value: 0 */
    flex-shrink: 0; /* do not shrink - initial value: 1 */
    flex-basis: 200px; /* width/height - initial value: auto */
}

并具有：

#td1 { 
    flex-grow: 1; 
}

这将允许#td1自动填充该空间，但为#td2保留200px。

作为一般说明，我还建议在使用CSS时使用类而不是ID。

Link to Codepen

希望有帮助！祝你好运。

div {
  border: 1px solid #000; 
}
#r { 
  display: flex;
}
.contain {
  display: flex;
  width: 50%;
}

<div id="r">
  <div class="contain">
    <div id="td1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </div>
    <div id="td2">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
  </div>
  <div class="contain">
    <div id="td3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
    <div id="td4">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,</div>
  </div>
</div>

Answer 2

如评论中所述，看来这是一个需要用JavaScript处理的任务。

下面是如何完成此操作的示例。它查看两个元素的宽度（例如td1和td2，如果它们的总和大于表的宽度的一半，它将调整它们的大小以仅填充表的一半。

let table = document.getElementById("t");
let tw = table.offsetWidth;

let d1 = document.getElementById("td1");
let d2 = document.getElementById("td2");
let d3 = document.getElementById("td3");
let d4 = document.getElementById("td4");


function getElSizes(el1, el2) {
	return el1.offsetWidth > el2.offsetWidth ? {"bigger": el1, "smaller": el2}: {"bigger":el2, "smaller":el1};
}

function autoFit(el1, el2) {
	let els = getElSizes(el1, el2);
        els.smaller.style.width = els.smaller.offsetWidth + "px";
        els.bigger.style.width = tw/2 - els.smaller.offsetWidth + "px";
}

// if d1 + d2 take up more than 50%, resize them
if (d1.offsetWidth + d2.offsetWidth > tw/4) {
	autoFit(d1, d2);
}

// if d1 + d2 take up more than 50%, resize them
if (d3.offsetWidth + d4.offsetWidth > tw/4) {
	autoFit(d3, d4);
}

#t {
  width: 100%;
  background: orange;
}

#r {
  background: lightblue;
}

<table id= "t">
  <tr id="r">
    <td id="td1">c </td>
    <td id="td2">test</td>
    <td id="td3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </td>
    <td id="td4">b</td>
  </tr>
</table>

它非常准系统，并且会扩展两个元素中最小的一个（因此，在此示例中，td2而不是td1被扩展了）。但这是一个很好的起点：）

50％宽度的两列CSS

2 个答案: