부트 스트랩 3 - 텍스트 영역 채우기 테이블 만들기

Question

포럼/게시판 소프트웨어를 만드는 중입니다. 스레드 페이지에 회신 섹션을 추가 할 때 문제가 발생했습니다. here은 제가 지금까지 가지고있는 것입니다.

HTML :

<div class="panel panel-default"> 
<div class="panel-body"> 
    <table> 
     <tr> 
      <td class="forum-post-heading-container"> 
       <img src="http://i.imgur.com/YURsw6g.png" class="img-thumbnail avatar-image forum-image"> 
       <div class="forum-post-header-padding"></div> 
       <div class="forum-post-header-author-name"><a href="./?a=profile&u=test">username</a></div> 
      </td> 
      <td class="forum-post-contents"> 
       <textarea id="reply-text" class="form-control"></textarea> 
      </td> 
     </tr> 
    </table> 
</div> 

CSS는 :

.forum-post-heading-container{ 
    padding: 15px; 
} 
.forum-image{ 
    width: 100px; 
    height: 100px; 
} 
.forum-post-header-padding{ 
    height: 5px;  
} 
.forum-post-header-author-name{ 
    text-align: center; 
} 
.forum-post-contents{ 
    border-left: 1px solid silver; 
    padding: 15px; 
} 

#reply-text{ 
    height: 200px; 
    width: 150px; 
    resize: none; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
    -moz-box-sizing: border-box; /* Firefox, other Gecko */ 
    box-sizing: border-box 
} 

Answer 1

이 (가) .panel-body (panels with tables), 100 % 폭을 얻을 수 있도록 테이블에 .table 클래스를 추가 제거하고 설정하는 col-*-*를 사용하여 초 td 너비 :

<div class="panel panel-default"> 
    <table class="table"> 
     <tr> 
      <td class="forum-post-heading-container"> 
       <img src="http://i.imgur.com/YURsw6g.png" class="img-thumbnail avatar-image forum-image"> 
       <div class="forum-post-header-padding"></div> 
       <div class="forum-post-header-author-name"><a href="./?a=profile&u=test">username</a></div> 
      </td> 
      <td class="forum-post-contents col-xs-11"> 
       <textarea id="reply-text" class="form-control"></textarea> 
      </td> 
     </tr> 
    </table> 
</div> 

마지막으로, #reply-text에 width를 제거하고 .forum-post-heading-container에 text-align: center를 추가합니다.