컨테이너에서 고정 너비 열 테이블 강제 확장

분명히 고전적인 문제이지만, "솔루션"은 내가 여러 가지 다른 질문을 포함하여 작동하지 않았 음을 발견했습니다.컨테이너에서 고정 너비 열 테이블 강제 확장

내 테이블이 컨테이너보다 넓은 경우 내 테이블 셀 너비가 고정 된 상태로 유지되고 컨테이너에 맞게 크기가 조정되지 않도록해야합니다.

재현 HTML (PHP로 생성 <td>의) : 나는 무엇을 시도했다

<html> 
    <head></head> 

    <body> 
    <table> 
     <tr> 
     <?php for($i=0;$i<15;$i++) { 
      echo "<td style='width:150px;border-right:1px solid black;'>".($i+1)."</td>"; 
     } ?> 
     </tr> 
    </table> 
    <div style='background:chartreuse;width:150px'>This is 150px wide.</div> 
    </body> 
</html>

: display:inline-block 인라인 블록과

div 컨테이너를 설정하여

table-layout:fixed
span 용기

이전 코드가 몸체를 오버플로하는 테이블을 생성하는 쉬운 방법이 있어야합니다.

누군가 도움을 줄 수 있습니까?

편집

그것은 내 이전의 표현이 명확하지 않을,하지만 난 열이 자신을 폭 지정하십시오.

테이블의 명시적인 너비를 지정하지 않고이 작업을 수행하려고합니다. TD만이 테이블을 더 넓게 만들 것이고, 이는 컨테이너를 더 넓게 만들 것입니다.

또한 인라인 CSS는 예제 목적으로 만 존재합니다.

출처

2011-09-14 Ben

테이블 레이아웃 : 고정으로 문제를 해결할 수 있습니다. td에 대해 제공 한 인라인 스타일을 제거하십시오. 너비를 지정하고 있습니다. td의 너비를 지정하지 않으면 내용에 따라 tds의 크기가 조정되고 테이블 레이아웃을 고정하면 내용에 맞게 크기가 조정되지 않습니다. – Bala

@Bala - 편집을 참조하십시오. 나는''s를 너비로 설정하고 싶다. ''에 너비를 설정하지 않으면 문제가 무효화됩니다. – Ben

생성 된 HTML 코드를 공유하거나 온라인에서 사용 가능 여부를 확인할 수 있습니다. – Bala

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 

<body> 
<div style="margin: 0pt auto; width: 980px;"> 
    <div style="500px;overflow:scroll"> 
    <table style="width: 100%; table-layout: fixed;"> 
     <tbody> 
     <tr> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
      <td style="width:150px;border-right:1px solid black;">This is 150px wide.</td> 
     </tr> 
     </tbody> 
    </table> 
    <div style="background:chartreuse;width:150px">This is 150px wide.</div> 
    </div> 
</div> 
</body> 
</html>

출처

2011-09-14 02:02:07 Bala

감사합니다. 나는 쉬운 해결책이 있다는 것을 알고 있었다 : 나는 폭 : 100 %를 잃어 버렸다. 건배! 내 재현 가능한 코드는 올바른 CSS와 함께 아래에 있습니다. – Ben

여기에 올바른 마크 업, @Bala의 칭찬이다, 내 질문에 내 HTML을 사용.

<html> 

    <head></head> 

    <body> 
    <table style='table-layout:fixed;width:100%'> 
     <tr> 
     <?php for($i=0;$i<15;$i++) { echo "<td style='width:150px;border-right:1px solid black;'>".($i+1)."</td>"; } ?> 
     </tr> 
    </table> 
    <div style='background:chartreuse;width:150px'>This is 150px wide.</div> 
    </body> 

</html>

출처

2011-09-14 03:23:21 Ben

컨테이너에서 고정 너비 열 테이블 강제 확장

답변

관련 문제