Question

我正在尝试在表格行中调整单个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都有60px height，width通过j设置。

我想将marked="true" td设置为80px height和width，所有其他td应保留在{{ 1}} 60px。

我可以调整height marked="true"的大小，但问题是，所有其他td s td也会调整大小，这不应该发生。

我尝试使用heights td和height属性，使用css并尝试调整width的大小，但这些属性都不起作用。

这有可能吗？

非常感谢帮助。

修改

这就是现在的样子：

这是一个可导航的日期表。

蓝色边框span应为td 80px和height。

其他人应该垂直对齐。

Answer 1

向td添加课程。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我认为最好不要使用桌子。相反，我会使用类似下面的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;
}

看起来像这样：

Answer 3

也许这个：

<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：

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

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

单行大小单{t}

4 个答案: