サイズはシングルローのシングルtd

Question

テーブルの行に1つの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を介して設定されます。

私は80pxheightとwidthからmarked="true"tdを設定するために、他のすべてのtd年代は60pxheightに滞在する必要がありたいと思います。

私はmarked="true"tdのサイズを変更することができるよしかし、問題は、他のすべてのtdのheightsがあまりにもリサイズされ、これが起こるべきではないこと、です。

私はCSSで、tdheightとwidth属性でそれを試してみましたが、サイズにspanを試してみましたが、それらのどれも動作しません。

これはどういうことですか？

助けていただければ幸いです。

EDIT

これは、今どのように見えるかです：

それは航行日のテーブルです。

青色tdが80pxheightとwidthであるべきで縁取ら。

他のものは、垂直に整列しています。

Answer 1

私はそれがテーブルを使用しないことをお勧めだと思います。

<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; 
} 

それは次のようになります。たぶん

Answer 2

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>

Answer 3

この：

は、代わりに私は、次のHTMLのようなものを使用します

<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; 
} 

Answer 4

は、クラスを追加しました。狭い：

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

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