Văn bản dọc trong IE trong ô bảng

Question

Tôi đang cố gắng xoay một số trình duyệt chéo văn bản trong một ô bảng mỏng kéo dài một vài hàng. Tôi muốn nó là một bản tóm tắt gọn gàng của các hàng, đó là lý do tại sao nó mỏng và quay -90 độ. Những lời khuyên được mô tả ở đây:

Vertical (rotated) text in HTML table

làm việc như một nét duyên dáng trừ, sự ngạc nhiên bất ngờ, IE, nơi mà các văn bản được cắt xén, nhưng văn bản được gài vào chiều rộng của tế bào.

Dưới đây là những phong cách phù hợp:

#schedmenu td.label { 
/*width:22px;*/ 
/*width:100%*/ 
vertical-align:middle; 
font-size:12.5px; 
} 


#schedmenu td.label span { 
display:block; 
-moz-transform: rotate(-90deg); /* FF3.5+ */ 
    -o-transform: rotate(-90deg); /* Opera 10.5 */ 
-webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */ 
     filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', 
       M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', 
       M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */ 
      zoom: 1; 

color:white; 
position:relative; 
top:12px; 
} 

và html:

<td class="label" rowspan="3"><span>Recent</span></td> 

Bạn sẽ là người hùng của tôi nếu bạn có thể làm cho tôi qua này một :)

Answer 1

Nếu tôi là bạn, tôi đã mở InkScape và tạo ra ba hình ảnh khác nhau.

hoặc như bạn đã có hình ảnh được in trên màn hình, chỉ cần cắt hình ảnh đó. và đặt chúng làm hình nền.

Tôi thường làm một số thiết kế css cực kỳ đẹp mắt trong chrome và firefox rồi in màn hình, cắt và thay thế thiết kế thực tế bằng hình ảnh và tất cả hoạt động trong IE.

hoặc span: dispaly: block and height: 100%; ??

Answer 2

Không cách thanh lịch nhất, nhưng nó hoạt động dưới IE8 (không cố gắng theo phiên bản cũ):

<td class="label" rowspan="3"><span>Recent<br/>&nbsp;</span></td> 

Answer 3

Tôi tạo ra 2 CSS, một cho IE và một cho phần còn lại của các trình duyệt. Đối với IE tôi đã sử dụng:

style="color:black; line-height:20px; writing-mode: tb-rl; filter: flipH() flipV();" 

Answer 4

Tôi thấy rằng trong khi nó có vẻ hoạt động, nó bị cắt như bạn đã có trong bài đăng gốc. Sau khi chơi với một vài tùy chọn, tôi đã thêm "bảng bố cục: cố định;" vào css của bảng. Bằng cách đó tôi có thể buộc tất cả độ rộng cột của tôi theo yêu cầu của họ và toàn bộ khoảng thời gian sẽ hiển thị.

Chỉ thử nghiệm trong IE8 tại thời điểm này, nhưng tôi tin rằng nó sẽ làm việc qua trình duyệt, vì điều duy nhất tôi thực sự thêm là bố trí bảng, mà tôi tin là hoàn toàn chấp nhận? Đặt nó thành cố định làm cho tất cả các cột bằng nhau (bỏ qua nội dung) trừ khi độ rộng đã được đặt, vì vậy bạn cần đặt tất cả độ rộng của mình khi cần.

Chỉ là một suy nghĩ.

CSS liên quan của tôi:

table.comp{ 
    table-layout: fixed; 
} 
th.vertth { 
    vertical-align:middle; 
    height: 125px; 
    width: 20px; 
    overflow: hidden; 
} 
th.vertth span { 
    -moz-transform: rotate(-90deg); /* FF3.5+ */ 
    -o-transform: rotate(-90deg); /* Opera 10.5 */ 
    -webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */ 
    filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17); /* IE6,IE7 */ 
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',M11=6.123031769111886e-17, M12=1, M21=-1, M22=6.123031769111886e-17)"; /* IE8 */ 
    zoom: 1; 
    position:relative; 
    display:block; 
    margin: 0; 
    width: 125px; 
} 

Lưu ý rằng chiều rộng của nhịp nên giống như chiều cao của tế bào để ngăn chặn nó không lan ra. Nếu bạn có nội dung lớn hơn để đi trong khoảng, hãy xem xét thay đổi kích thước chiều cao hoặc chiều rộng cột của bạn.