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。

您的解决方案是将标题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之类的东西。

＆＃13;

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; }

＆＃13;

<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>

＆＃13;

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

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

2 个答案: