중첩 테이블이 있으며 현재 docInfo 클래스가있는 중첩 테이블의 두 번째 열이 가운데보다 위쪽에 더 정렬 된 것처럼 보입니다. 그것은 'John'을 포함합니다. 나머지 테이블은 괜찮아 보입니다.
<table class="strategies">
<thead>
<tr>
<th class="first_single">Your spending and savings.
</th>
<th class="second"></th>
<th class="fourth">Road</th>
<th class="fifth_single"></th>
</tr>
</thead>
<tbody>
<tr ng-class="'odd'" class="odd">
<td>
<table class="docInfo">
<tbody>
<tr>
<td rowspan="2" class=""><img src="/concierge/images/doc7.png" alt="docimage"></td>
<td>John</td>
</tr>
<tr>
<td><span><p>Mar 6,2015 9:10:11 AM
</p></span></td>
</tr>
</tbody>
</table>
</td>
<td>Selected</td>
<td><img src="/concierge/images/rb_unchecked.png" alt="radiobutton" ng-click="changeStatus(strategy,'selected',1)"
ng-show="strategy.statuses[0].status!='selected'" class=""><img src="/concierge/images/rb_checked.png"
alt="radiobutton"
ng-show="strategy.statuses[0].status=='selected'"
class="ng-hide"></td>
<td><img src="/concierge/images/rb_unchecked.png" alt="radiobutton" ng-click="changeStatus(strategy,'selected',2)"
ng-show="strategy.statuses[1].status!='selected' && persons.length == 2" class="ng-hide"><img
src="/concierge/images/rb_checked.png" alt="radiobutton" ng-show="strategy.statuses[1].status=='selected'"
class="ng-hide"></td>
</tr>
<tr ng-class="'odd'" class="odd">
<td>
<table class="docInfo">
<tbody>
<tr>
<td rowspan="2" class=""><img src="/concierge/images/doc7.png" alt="docimage"></td>
<td>Bert</td>
</tr>
<tr>
<td><span><p>Mar 6,2015 9:10:11 AM
</p></span></td>
</tr>
</tbody>
</table>
</td>
<td>Selected</td>
<td><img src="/concierge/images/rb_unchecked.png" alt="radiobutton" ng-click="changeStatus(strategy,'selected',1)"
ng-show="strategy.statuses[0].status!='selected'" class=""><img src="/concierge/images/rb_checked.png"
alt="radiobutton"
ng-show="strategy.statuses[0].status=='selected'"
class="ng-hide"></td>
<td><img src="/concierge/images/rb_unchecked.png" alt="radiobutton" ng-click="changeStatus(strategy,'selected',2)"
ng-show="strategy.statuses[1].status!='selected' && persons.length == 2" class="ng-hide"><img
src="/concierge/images/rb_checked.png" alt="radiobutton" ng-show="strategy.statuses[1].status=='selected'"
class="ng-hide"></td>
</tr>
</tbody></table>
이것은 스타일 시트입니다.
.strategies {
margin-top: 20px;
table-layout: fixed;
}
.strategies td {
margin: 0 5px;
padding: 10px 18px;
vertical-align: middle;
}
.strategies thead tr {
background-color: white;
color: black;
vertical-align: bottom;
text-align: left;
padding-right: 14px;
}
.strategies thead th {
padding: 12px 8px 7px;
font-weight: lighter;
}
.strategies tbody tr {
font-size: 14px;
}
.strategies tbody tr.odd {
background-color: yellow;
}
.strategies tbody tr.even {
background-color: grey;
color: black;
}
.strategies .first {
width: 40%;
}
.strategies .first_single {
width: 69%;
}
.strategies .second {
width: 30%;
}
.strategies .third {
width: 20%;
}
.strategies .fourth {
width: 20%;
}
.strategies .fifth {
width: 20%;
}
.strategies .fifth_single {
width: 1%;
}
.docInfo {
table-layout: fixed;
float: left;
}
.docInfo th, .docInfo td {
margin: 0 5px;
padding: 0px 5px;
line-height: 0.2;
font-size: 10px;
vertical-align: top;
font-family: Arial;
font-weight: bold;
}
.docInfo .first {
width: 40%;
}
.docInfo .second {
width: 60%;
}
.docInfo img {
background: transparent;
height: 25px;
}
다음은 바이올린 참조입니다 : http://jsfiddle.net/dnpcps4n/11/
이를 달성하기 위해 할 일이별로 없습니다. 첫째, 다음을 선언 할 때 일관성을 유지해야합니다.
<td>John</td>
과
<td><span><p>Mar 6,2015 9:10:11 AM</p></span></td>
<p>태그에 날짜를 넣으면 사용자 에이전트 스타일 시트, 즉 브라우저에서 여백 (상단 및 하단)이 표시됩니다. 이름이 <p>태그 에 없기 때문에 두 테이블 행의 높이가 다르기 때문에 수직 중심이 엉망이됩니다. 따라서 1) 두 행의 높이를 동일하게 만드십시오 . 나는 <p>그것을 위해 만들어지지 않았으므로 태그를 제거하는 것이 좋습니다 . 여백이 필요한 경우 CSS 스타일을 대신 추가 할 수 있습니다.
그 시점부터 거의 완료되었습니다. 당신에 .docInfo th, .docInfo td선언, 당신은 규칙을 제거해야합니다 :
line-height: 0.2;
요약하자면 :
1) 교체 <td><span><p>*date*</p></span></td>와 <td>*date*</td>firstName을과 일치하도록
2) 제거 line-height: 0.2
업데이트 된 바이올린 보기
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다