편집 가능한 테이블의 두 번째 td에 고정 너비

Question

편집 가능한 테이블의 고정 너비가 필요하지만 각 TD에 대해 다른 너비를 설정하려고합니다. 내 시도에서 고정 된 너비로 테이블을 설정할 수 있지만 이로 인해 TD의 너비가 고정 너비를 설정하기 전의 80 % - 20 % 대신 50 %로 표시됩니다.

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 이하) 또는 헤더와 동일한 TR에 기초 TDS 파일을 넣어 (참조 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

당신은이 오류를 내가 n 당신의 html 문법은 문제와 관련이 없지만. this fiddle과 같은 것이 필요한지 확인하십시오. 모든 TD는 열의 폭이 동일하므로

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> 
 
\t <tbody> 
 
<tr> 
 
\t \t \t <td colspan="2">Header:</td> 
 
\t \t \t 
 
</tr> 
 
\t \t <tr> 
 
\t \t \t <td>Name:</td> 
 
\t \t \t <td><br/></td> 
 
</tr> 
 
\t \t <tr> 
 
\t \t \t <td>DOB::</td> 
 
\t \t \t <td><br/></td> 
 
</tr> 
 
\t \t <tr> 
 
\t \t \t <td>Comments:</td> 
 
\t \t \t <td><br/></td> 
 
</tr> 
 
    </tbody> \t 
 
    </table></div>

그렇지 않으면 당신은 늘 변수 TD 폭을 달성 할 수있을. 해결 방법으로 colspan 속성을 사용할 수 있습니다.