可编辑表中第二个 td 的固定宽度

Question

我想为我的可编辑表格设置一个固定宽度，但我也想为每个 TD 设置不同的宽度。 在我的尝试中，我能够将表格设置为固定宽度，但这会导致 TD 的宽度看起来是 50%，而不是设置固定宽度之前的 80% - 20%

CSS

table {
  margin: 15px 0;
  border: 1px solid black;
  table-layout: fixed;
  width: 100%;
}
.fixed td:nth-of-type(1) {width:20%;}
.fixed td:nth-of-type(2) {width:80%; text-align: left;}
.fixed {
margin:0px;padding:0px;
width:100%;

    border:1px solid #000; }
.fixed td {
margin:0px;padding:0px;
width:100%;
    border:1px solid #000; }

HTML

<div class="fixed" contenteditable="true">
<table>
    <tbody>
<tr>
            <td colspan="2">Header:</td>

</tr>
        <tr>
            <td>Name:</td>
            <td><br/></td>
</tr>
        <tr>
            <td>DOB::</td>
            <td><br/></td>
</tr>
        <tr>
            <td>Comments:</td>
            <td><br/></td>
</tr>

        </table>

我错过了什么？检查this Fiddle 是否有帮助。通过键入足够的内容来尝试一下，在某个点之后它会自动转到下一行。

Answer 1

您的代码的问题是您的第一个<tr> 拥有colspan="2"。因此，当您为表的所有 TD 提供 width:100% 时，css 不会按您的意愿应用于基础 TD。

您的解决方案是将 Header td: <td colspan="2">Header:</td> 分离到一个单独的表中（请参阅下面的 HTML-1） 或 将底层 TD 放在与标头相同的 TR 中（请参阅下面的 HTML-2）。

还像我在下面所做的那样更改 CSS 并简化它。你写了很多不必要的 CSS。

Working Fiddle Here

这是我尝试过的。试试这个：

HTML-1：

<table class="fixed" >
    <tbody>
    <tr>
        <td colspan="2">Header:</td>
    </tr>
    </tbody>
</table>
<table  class="fixed" >
    <tbody>
    <tr>
        <td>Name:</td>
        <td>test</td>
    </tr>
    <tr>
        <td>DOB::</td>
        <td>tes</td>
    </tr>
    <tr>
        <td>Comments:</td>
        <td>test</td>
    </tr>
</table>

HTML-2：

<table class="fixed" >
<tbody>
  <tr>
        <td colspan="2">Header:</td>
    <tr>
        <td>Name:</td>
        <td>test</td>
    </tr>
    <tr>
        <td>DOB::</td>
        <td>tes</td>
    </tr>
    <tr>
        <td>Comments:</td>
        <td>test</td>
    </tr>
 </tr>
</tbody>
</table>

简化的 CSS：

table {
  margin: 0 0;
  width: 100%;
  table-layout: fixed;
}

.fixed td:nth-of-type(1) {width:80%;}
.fixed td:nth-of-type(2) {width:20%; text-align: left;}

.fixed td {
margin:0px;padding:0px;
border:1px solid #000; }

Answer 2

您的 html 语法有错误，尽管这与问题无关。 看看你是否需要像this fiddle 这样的东西。

table {
  margin: 15px 0;
  border: 1px solid black;
  
  width: 100%;
}
.fixed td:nth-of-type(1) {width:20%;}
.fixed td:nth-of-type(2) {width:80%; text-align: left;}
.fixed {
margin:0px;padding:0px;
width:100%;

    border:1px solid #000; }
.fixed td {
margin:0px;padding:0px;
width:100%;
    border:1px solid #000; }

<div class="fixed" contenteditable="true">
<table>
	<tbody>
<tr>
			<td colspan="2">Header:</td>
			
</tr>
		<tr>
			<td>Name:</td>
			<td><br/></td>
</tr>
		<tr>
			<td>DOB::</td>
			<td><br/></td>
</tr>
		<tr>
			<td>Comments:</td>
			<td><br/></td>
</tr>
    </tbody>	
    </table></div>

否则，您将无法实现可变 td 宽度，因为所有 td 在列中将具有相同的宽度。 您可以使用 colspan 属性来解决问题。