HTML 一個td內兩個對齊

html5 css html

柯柯 2018-08-22 13:32:47 ‧ 10396 瀏覽

分享至

我有一個HTML表格的排版
校名要置左對齊學校跟狀態要置右

<tr>
    <td>最高學歷</td><td colspan="4">{#title} 學校 {#states}</td>
</tr>

顯示出來要是這個樣子
┌─────────────────────────────────┐
│台灣大學　　　　　　　　　　　學校口畢業口肄業│
└─────────────────────────────────┘

可以這樣排嗎因為我改TD的 text-align='right' 全部的都置右對齊了

窮嘶發發發 iT邦高手 1 級 ‧ 2018-08-22 17:45:01 檢舉

<td>最高學歷</td><td colspan="4">
<span style="display:inline-block; width:50%; text-align:left;">{#title}</span>
<span style="display:inline-block; width:50%; text-align:right;">學校 {#states}</span> </td>

小魚 iT邦大師 1 級 ‧ 2018-08-22 20:23:24 檢舉

這是要列印出來嗎?

柯柯 iT邦新手 3 級 ‧ 2018-08-23 09:27:28 檢舉

to 小魚
把網頁用mpdf轉成pdf讓使用者印出來或下載只是原網頁對齊方式是正常但是mpdf轉成pdf的時候他對齊就沒效果了

我現在是把他多一個欄位放學校 {#states} 再把左框線隱藏掉

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

純真的人

iT邦大師 1 級 ‧ 2018-08-22 13:38:38

裡面還要加元素~
例如~

<tr>
    <td>最高學歷</td><td colspan="4"><div style=" float:left;">{#title} 學校</div> <div style=" float:right;">{#states}</div></td>
</tr>

回應 1
分享
檢舉

柯柯 iT邦新手 3 級 ‧ 2018-08-22 13:52:40 檢舉

感謝 float也沒辦法用轉成pdf DIV會變成兩行我後來用另一種方式了搞了很久原來是mPDF的問題

登入發表回應

跟著鄉民看熱鬧

iT邦高手 1 級 ‧ 2018-08-22 13:39:06

這樣…
html

<table>
    <tr>
        <td>最高學歷</td>
        <td colspan="4">
            <div class="school">台灣大學</div>  
            <div class="status">學校 口畢業 口肄業</div>
        </td>
    </tr>
</table>

css

table{
    width:500px;
}
table tr td{
    border: 1px solid black;
}
.school{
    float: left;
}
.status{
    float: right;
}

效果

回應 2
分享
檢舉

柯柯 iT邦新手 3 級 ‧ 2018-08-22 13:52:42 檢舉

感謝 float也沒辦法用轉成pdf DIV會變成兩行我後來用另一種方式了搞了很久原來是mPDF的問題

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-08-22 13:56:14 檢舉

可以改用span試試

span{
    display:block;
}

登入發表回應

froce

iT邦大師 1 級 ‧ 2018-08-22 16:21:45

https://jsbin.com/jihumereji/3/edit?html,output
第一個td只是要固定高度而已。

回應
分享
檢舉

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙