html 如何使用行跨度覆盖1.5倍的单元格？

zsbz8rwp 于 2022-12-16 发布在其他

关注(0)|答案(4)|浏览(156)

这个代码没有使最后2个单元格覆盖3行。我应该如何修复它？
下面是代码：

<table border="2">
			<tr>
				<th rowspan="3">Day</th>
				<th colspan="3">Seminar</th>
			</tr>
			<tr>
				<th colspan="2">Schedule</th>
				<th rowspan="2">Topic</th>
			</tr>
			<tr><th>Begin</th><th>End</th></tr>
			<tr>
				<td rowspan="2">Monday</td>
				<td rowspan="2">8:00 a.m.</td>
				<td rowspan="2">5:00 p.m.</td>
				<td>Introduction to XML</td>
			</tr>
			<tr><td>Validity:DTD and Relax NG</td></tr>
			<tr>
				<td rowspan="3">Tuesday</td>
				<td>8:00 a.m.</td>
				<td>11:00 a.m.</td>
				<td rowspan="1.5">XPath</td>
			</tr>
			<tr>
				<td>11 a.m.</td>
				<td>2:00 p.m.</td>
			</tr>
			<tr>
				<td>2:00 p.m.</td>
				<td>5:00 p.m.</td>
				<td rowspan="1.5">XSL Transformations</td>
			</tr>
		</table>

行跨度不允许1.5。如果不将所有的行和列加倍，我怎么做呢？

Html

来源：https://stackoverflow.com/questions/28381856/how-do-i-use-rowspan-to-cover-1-5-times-the-cell

4条答案

按热度按时间

ncgqoxb01#

我试过这个例子，下面是我的版本：

<table width="500px" border="1" cellpadding="0" cellspacing="2px" style="text-align: center;">
<tr>
  <td rowspan="3">DAY</td>
  <td colspan="3">SEMINAR</td>
</tr>
<tr>
  <td colspan="2">SHEDULE</td>
  <td rowspan="2">TOPIC</td>
</tr>
<tr>
  <td>BEGIN</td>
  <td>END</td>
</tr>
<tr>
  <td rowspan="2">Monday</td>
  <td rowspan="2">8:00 am</td>
  <td rowspan="2">5:00 am</td>
  <td>Introduction to xml</td>
</tr>
<tr>
  <td>Validaty: DTD and Relax NG</td>
</tr>
<tr>
  <td rowspan="5">Tuesday</td>
  <td rowspan="2">8:00 am</td>
  <td rowspan="2">11:00 am</td>
  <td rowspan="3">XPath</td>
</tr>
<tr></tr>
<tr>
  <td rowspan="2">11:00 am</td>
  <td rowspan="2">2:00 pm</td>
</tr>
<tr>
  <td rowspan="2">XSL transformations</td>
</tr>
<tr>
  <td>2:00 pm</td>
  <td>5:00 pm</td>
</tr>
<tr>
  <td>Wensday</td>
  <td>8:00 am</td>
  <td>12:00 pm</td>
  <td>XSL Formatting Objects</td>
</tr>

预览here

赞(0）回复(0）举报 2022-12-16

oxalkeyp2#

我知道现在已经太晚了，但这可能只是帮助任何人谁面临同样的问题在未来。
我使用的rowspan为“3”，并使用<hr>标记解决了这个问题。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>5.png</title>
        <style>
            table {
                border: 1px solid;
            }
            th, td {
                border: 1px solid;
            }
        </style>
    </head>
    <body>
        <table>
            <caption></caption>
            <tr>
                <th scope="col" rowspan="3">Day</th>
                <th scope="colgroup" colspan="4">Seminar</th>
            </tr>
            <tr>
                <th scope="colgroup" colspan="2">Schedule</th>
                <th scope="col" rowspan="2" colspan="2">Topic</th>
            </tr>
            <tr>
                <th scope="col">Begin</th>
                <th scope="col">End</th>
            </tr>
            <tr>
                <td rowspan="2">Monday</td>
                <td rowspan="2">8:00 a.m.</td>
                <td rowspan="2">5:00 p.m.</td>
                <td>Introduction to XML</td>
            </tr>
            <tr>
                <td>Validity: DTD and Relax NG</td>
            </tr>
            <tr>
                <td rowspan="3">Tuesday</td>
                <td>8:00 a.m.</td>
                <td>11:00 a.m.</td>
                <td rowspan="3">
                    <p>XPath
                    <hr>
                    XSL Transformations</p>
                </td>
            </tr>
            <tr>
                <td>11:00 a.m.</td>
                <td>2:00 p.m.</td>
            </tr>
            <tr>
                <td>2:00 p.m.</td>
                <td>5:00 p.m.</td>
            </tr>
            <tr>
                <td>Wednesday</td>
                <td>8:00 a.m.</td>
                <td>12:00 p.m.</td>
                <td>XSL Formatting Objects</td>
            </tr>
        </table>
    </body>
</html>

赞(0）回复(0）举报 2022-12-16

wwodge7n3#

我试过这个例子，下面是我的版本：

*,
*::before,
*::after {
  box-sizing: border-box;
}

table {
  width: auto;
  font-size: 30px;
  text-align: center;
}

table,
th,
td {
  border: 2px solid grey;
}

.inner-table {
  width: 100%;
  border: none;
}

.inner-table td {
  padding: 10px 0;
}

<table>
  <tr>
    <th rowspan="3">Day</th>
    <th colspan="3">Seminar</th>
  </tr>
  <tr>
    <th colspan="2">Schedule</th>
    <th rowspan="2">Topic</th>
  </tr>
  <tr>
    <th>Begin</th>
    <th>End</th>
  </tr>

  <tr>
    <td rowspan="2">Monday</td>
    <td rowspan="2">8:00 am</td>
    <td rowspan="2">5:00 pm</td>
    <td>Inroduction to Xml</td>
  </tr>
  <tr>
    <td>Validity: DTD and Relax NG</td>
  </tr>
  <tr>
    <td rowspan="3">Tuesday</td>
    <td>8:00 am</td>
    <td>11:00 a.m</td>
    <td rowspan="3">
     <table class="inner-table">
        <tr>
          <td>XPatx</td>
        </tr>
        <tr>
          <td>XSl Transformation</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>12:00 am</td>
    <td>2:00 pm</td>
  </tr>
  <tr>
     <td>4:00 pm</td>
    <td>5:00 am</td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td>8:00 pm</td>
    <td>4:00 am</td>
    <td>XSL Formatting Objakts</td>
  </tr>
</table>

<br>
<br>
<br>
<br>

赞(0）回复(0）举报 2022-12-16

3okqufwl4#

我遇到了同样的问题。我的第一个想法是将所有的行跨度加倍，1到2，1.5到3，等等...
然而，它没有工作，我猜这是因为空tr没有被渲染。所以我把一个空td放在空tr里面，并给予它一个最小高度。
下面是我的工作示例：
超文本标记语言

<table>
  <tr>
    <td rowSpan="5">A</td>
    <td rowSpan="2">B</td>
    <td rowSpan="2">C</td>
    <td class="spaceholder"></td>
  </tr>
  <tr>
 <td class="spaceholder"></td>
  </tr>
  <tr>
    <td rowSpan="2">B</td>
    <td rowSpan="2">C</td>
    <td class="spaceholder"></td>
  </tr>
  <tr>
   <td class="spaceholder"></td>
  </tr>
  <tr>
    <td rowSpan="2">B</td>
    <td rowSpan="2">C</td>
   <td class="spaceholder"></td>
  </tr>
  <tr>
    <td>A</td>
    <td class="spaceholder"></td>
  </tr>
</table>

CSS：

table,
td {
  border: 1px solid;
}
.spaceholder {
  height: 20px;
  border: none;
  padding:0px;
}

Codepen

赞(0）回复(0）举报 2022-12-16

我来回答

html 如何使用行跨度覆盖1.5倍的单元格？

4条答案

相关问题

热门标签

最新问答