iT邦幫忙

0

HTML 一個td內 兩個對齊

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

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

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

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

<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邦新手 5 級 ‧ 2018-08-23 09:27:28 檢舉
to 小魚
把網頁用mpdf轉成pdf讓使用者 印出來或下載 只是原網頁對齊方式是正常 但是mpdf轉成pdf的時候他對齊就沒效果了

我現在是把他多一個欄位放 學校 {#states} 再把左框線隱藏掉
1
純真的人
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>
柯柯 iT邦新手 5 級 ‧ 2018-08-22 13:52:40 檢舉

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

1

這樣…
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;
}

效果https://ithelp.ithome.com.tw/upload/images/20180822/20108694da5qsZcTPE.png

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

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

可以改用span試試

span{
    display:block;
}
0
froce
iT邦高手 1 級 ‧ 2018-08-22 16:21:45

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

我要發表回答

立即登入回答