CSS 스타일이 테이블을 전체 페이지 폭을 채우지 않는 방법은?

-1

아래의 HTML &에 의해 생성 된 표를 참조하십시오. 여기에 대한 스크린 샷을 볼 수 있습니다 : https://www.dropbox.com/s/i7yszk2v7jlwdxr/Screenshot%202013-12-17%2012.58.00.png CSS 스타일이 테이블을 전체 페이지 폭을 채우지 않는 방법은?

제 질문은이 표가 페이지의 전체 너비가 아닌 필요한 수평 공간 만 차지하는 지 확인하는 것입니다. 그것은 아주 간단한 질문처럼 보입니다. 단지 "width : 100 %;" 5 번 라인에. 그러나 경우에 당신은 아무도 정말 원하는하지 않을 것이다하는 방식으로 테이블을 그 나사를 볼 수 있음 : https://www.dropbox.com/s/hztj01y3901whv9/Screenshot%202013-12-17%2013.01.18.png

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <style> 
      .myStyle table { border-collapse: collapse; text-align: left; width: 100%; } 
      .myStyle {font: normal 12px/150% Arial, Helvetica, sans-serif; background: #fff; overflow: hidden; border: 1px solid #801D99; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } 
      .myStyle table td, 
      .myStyle table th { padding: 3px 10px; } 
      .myStyle table thead th {background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #801D99), color-stop(1, #801D99));background:-moz-linear-gradient(center top, #801D99 5%, #801D99 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#801D99', endColorstr='#801D99');background-color:#801D99; color:#FFFFFF; font-size: 15px; font-weight: bold; border-left: 1px solid #801D99; } 
      .myStyle table thead th:first-child { border: none; } 
      .myStyle table tbody td { color: #801D99; font-size: 12px;border-bottom: 1px solid #995993;font-weight: normal; } 
      .myStyle table tbody td:first-child { border-left: none; } 
      .myStyle table tbody tr:last-child td { border-bottom: none; } 
     </style> 
    </head> 
    <body> 
     <div class="myStyle"> 
      <table> 
       <thead> 
        <tr> 
         <th colspan="2">My table.</th> 
        </tr> 
       </thead> 
       <tbody> 
         <tr><td>1.</td><td>B</td></tr> 
         <tr><td>2.</td><td>C</td></tr> 
         <tr><td>3.</td><td>D</td></tr> 
       </tbody> 
      </table> 
    </body> 
</html>

출처

2013-12-17 Saqib Ali

누군가가 "연구 노력을 보이지 않는다"는 이유로이 질문에 찬성표를 던지는 것은 당연합니다. 해결책을 찾기 위해 주위를 둘러 보았습니다. 유용하고 도움이되는 답변을 이끌어내는 완전하고 명백하지 않은 대답으로 깨끗하고 일반적인 질문을 제시했습니다. 부적절한 투표로 인해 처벌을 받아야합니다. –

이 inline-block에 div.myStyle 요소의 display을 수정; 이렇게하면 width을 백분율로 할당하기 위해 부모의 width을 명시 적으로 명시/정의해야하므로 table이 부모의 너비 인 100%을 차지하지 않으므로 필요한 공간 만 사용하고 부모의 div 요소는 크기에 따라 축소됩니다 그 내용의. Demo. 요소가 -ed float 때 다른 인접 형제 요소가 오른쪽으로 공간을 차지주의 않습니다하지만, float: left;을 같은 (demo)을 달성하는 것이다 :

또는, display 속성을 무시할 수 있고, 대신에 설정합니다.

출처

2013-12-17 18:06:15

Worked. 감사!!! –

안녕하세요. 도와 줘서 다행이야! –

CSS 스타일이 테이블을 전체 페이지 폭을 채우지 않는 방법은?

답변

관련 문제