單行td大小單行

我想大小單行td在錶行中。單行td大小單行

<table> 
    <tr> 
    <td> 
     <span>1</span> 
    </td> 
    <td marked="true"> <!-- Should be 80px height and width --> 
     <span>2</span> 
    </td> 
    <td> 
     <span>3</span> 
    </td> 
    </tr> 
</table>

現在我所有的td的有60pxheight和width通過JS設置。

我想設置的marked="true"td到80pxheight和width和所有其他td的應該留在60pxheight。

我可以調整marked="true"td但問題是，所有其他td s heights也調整大小，這不應該發生。

我試着用tdheight和width屬性，用CSS和試圖調整大小的span，但他們都沒有工作。

這是不是有可能？

幫助將不勝感激。

編輯

這是怎麼看起來像現在：

這是一個通航天表。

藍色鑲上td應該是80pxheight和width。

其他人肩部垂直對齊。

來源

2017-03-21 Olivier Krull

我認爲這是最好不要使用表格。相反，我會使用類似如下的HTML：

<div id="dayList"> 
    <div>7</div> 
    <div>8</div> 
    <div data-marked="true">9</div> 
    <div class="Weekend">10</div> 
    <div class="Weekend">11</div> 
</div>

和下面的CSS：

#dayList { 
    display: flex; 
    flex-flow: row nowrap; 
    align-items: center; 
    align-content: center; 
} 

#dayList > div { 
    flex: 0 0 60px; 
    margin: 1px; 
    border: 1px solid #CCC; 
    width: 60px; 
    height: 60px; 
    background-color: #EEE; 
    text-align: center; 
    line-height: 60px; 
} 

#dayList > div.Weekend { 
    background-color: #CCC; 
} 

#dayList > div[data-marked=true] { 
    flex: 0 0 80px; 
    border: 1px solid #00F; 
    width: 80px; 
    height: 80px; 
    line-height: 80px; 
}

它應該是這樣的：

來源

2017-03-21 12:19:04 eldes

這是我已經做了，但問題是，其他所有TD的get 80px高度，他們應該留在60px –

你需要使用表嗎？你可以發送一個參考圖片，說明你最終的外觀如何？例如，我問了你爲什麼可以使用「div」的網格。 – eldes

我編輯我的問題 –

添加一個課程到td。

.big { 
 
    height: 80px; 
 
    width: 80px; 
 
}

<table> 
 
    <tr> 
 
    <td> 
 
     <span>1</span> 
 
    </td> 
 
    <td class="big" marked="true"> 
 
     <!-- Should be 80px height and width --> 
 
     <span>1</span> 
 
    </td> 
 
    <td> 
 
     <span>1</span> 
 
    </td> 
 
    </tr> 
 
</table>

來源

2017-03-21 12:12:45 Conor

這種調整大小的所有其他TD對80px高度，他們應該留在60像素 –

也許這樣的：

<table> 
    <tr> 
<td></td> 
<td rowspan="3" marked="true" class="marked" width="80" height="80">test</td> 
<td></td> 
</tr> 
<tr> 
<td> 
    <span>1</span> 
</td> 
<td> 
    <span>1</span> 
</td> 
    </tr> 
    <tr> 
<td></td> 
<td></td> 
</tr> 
</table>

CSS：

td { 
    border: 1px solid green; 
}

來源

2017-03-21 12:32:07 rinatoptimus

在第一個和第三個中添加高度=「20」到 – rinatoptimus

這幾乎是在做詭計，你知道是否可以向上使用rowspan，所以在我的主tr之前一個tr和一個tr之後？ –

不明白。現在在主tr下面有一個tr和一個tr。你的意思是說你想將rowspan添加到1st tr，但是添加到2nd？ – rinatoptimus

看來這正常工作，加入類。窄：

.narrow { 
    border-top: 25px solid transparent; 
    border-bottom: 25px solid transparent; 
}

https://jsfiddle.net/rinatoptimus/4hw1a8f3/

來源

2017-03-21 13:36:22 rinatoptimus

看起來像一個簡單的方法來解決它，但我需要一個1px邊框 –

嘗試將這些樣式添加到.qq span { padding：10px; background-color：grey; 邊框：1px純黑色; } https://jsfiddle.net/rinatoptimus/4hw1a8f3/2/ – rinatoptimus

單行td大小單行

回答

相關問題