오버 플로우 테이블의 여백/여백 설정

div 안에있는 테이블이 있습니다. 이 테이블에는 윈도우가 겹치는 내용이 있으므로 그 내용을보기 위해 왼쪽으로 스크롤해야합니다. 문제는 테이블에 읽기 쉽도록 오른쪽에 여백 또는 여백이없는 것입니다.오버 플로우 테이블의 여백/여백 설정

어떻게 패딩 또는 여백을 해당 테이블에 추가 할 수 있습니까?

는

<html> 
<head></head> 
<body> 
<div id="table"> 
    <table> 
     <thead>...</thead> 
     <tbody>...</tbody> 
    </table> 
</div> 
<style> 
table td, table th, table td {border: 1px solid red} 
table { padding-right: 100px; border: 1px solid blue} 
table thead, table tbody {padding-right: 100px;} 
</style> 
</body> 
</html>

출처

2013-01-15 petwho

머리 부분에 CSS를 넣거나 .ssss 파일에 넣고 머리 태그에 링크를 만듭니다. –

물론, 데모 목적으로 만 사용합니다 – petwho

답장을 보내 주셔서 감사합니다. 그러나 자바 스크립트를 통해이 작업을 수행하는 것이 훨씬 쉽고 매우 유연하다는 것을 알 수 있습니다. 여기에서 jQuery 프레임 워크를 사용하고 있습니다.

$('#table').width() = $('table').width() + 20; 
$('table').css('padding-right', '10px');

이렇게하면 테이블의 너비는 처음에 의도 한대로됩니다.

출처

2013-01-15 09:40:08 petwho

그냥 당신이 시도 할 수 테이블

출처

2013-01-15 07:30:52

에 display: inline-block;를 추가 : 여기

는 HTML이 (CSS를 아래 작동하지 않습니다)처럼 보이는입니까?

<style type="text/css"> 
     #table table td,#table table th,#table table td {border: 1px solid red} 
     #table table { padding-right: 100px;color: blue} 
     #table table thead,#table table tbody {padding-right: 100px;} 
</style>

출처

2013-01-15 07:44:22 midstack

안녕하세요. 답장을 보내 주셔서 감사합니다. 귀하의 솔루션이 처음에는 효과가있는 것으로 보입니다. 그러나, 스타일을 테이블에 적용 할 때 (테두리를 추가하여). 내가 의도 한대로 작동하지 않습니다. 답변을 검토해 주시겠습니까? 고맙습니다. – petwho

\t \t # 테이블 테이블, 테이블 테이블 td 테이블 테이블 # {border : 1px solid # F00;} # 테이블 테이블 {padding-right : 100px; color : # 00F;} # 테이블 테이블 tbody {padding-right : 100px;} \t 잘 작동했지만 잘 보이게하려면 여백으로 변경해야합니다. – midstack

css에서는 접두어를 사용하지 않아도됩니다. 또는 테이블, TD, TR, 페이지에 #, 문제의

, 여기에 코드를

#table table thead, table tbody {padding-right: 100px;}

참고 번호를 다음을 추가 ... # 이드 선택이기 때문입니다.

행운을 빌어 요 ..!

출처

2013-01-15 07:52:21 Venkat

오버 플로우 테이블의 여백/여백 설정

답변

관련 문제