Question

如何在表的一行中操纵td而不影响整个行？我想要的是将下一行的单元格近似到这一行的单元格。请查看示例，它将帮助您了解我的需求。

我曾尝试过多次变更职位示例，但由于我对CSS缺乏经验而无法正常工作

没有帮助，将不胜感激

.one-cell {
  width: 12%;
  height: 50px;
  border: 1px black solid;
  float: left;
  margin-right: 1%;
}

.one-day {
  width: 12%;
  background-color: lightgrey;
  color: white;
  font-family: 'Roboto', sans-serif;
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  /*padding-right:0.5%;*/
  border: white solid 1px;
  float: left;
  margin-right: 1%;
  height: 70px;
  line-height: 70px;
  margin-bottom: 1%;
}

.row-tr {
  display: inline-block;
  padding-left: 7%;
  width: 90%;
  margin: auto;
  padding-top: 1%;
}
//only html writings  nothinf

<table id="tbl_Grid" class="row-container">
  <thead>
    <tr class="row-days">
      <th class="one-day">Monday</th>
      <th class="one-day">tuesday</th>
      <th class="one-day">Wednsday</th>
      <th class="one-day">thursday</th>
      <th class="one-day">friday</th>
      <th class="one-day">saturday</th>
      <th class="one-day">Sunday</th>
    </tr>
  </thead>
  <tbody id="bodyTable">

    <tr></tr>
    <tr class="row-tr">
      <td id="cell0" class="one-cell">0</td>
      <td id="cell1" class="one-cell">1</td>
      <td id="cell2" class="one-cell">2</td>
      <td id="cell3" class="one-cell">3</td>
      <td id="cell4" class="one-cell">4</td>
      <td id="cell5" class="one-cell">5</td>
      <td id="cell6" class="one-cell">6</td>
    </tr>
    <tr class="row-tr">
      <td id="cell7" class="one-cell">7</td>
      <td id="cell8" class="one-cell">8</td>
      <td id="cell9" class="one-cell">9</td>
      <td id="cell10" class="one-cell">10</td>
      <td id="cell11" class="one-cell">11</td>
      <td id="cell12" class="one-cell">12</td>
      <td id="cell13" class="one-cell">13</td>
    </tr>
    <tr class="row-tr">
      <td id="cell14" class="one-cell">14</td>
      <td id="cell15" class="one-cell">15</td>
      <td id="cell16" class="one-cell" rowspan="2" style="height: 100px;">16</td>
      <td id="cell17" class="one-cell" rowspan="2" style="height: 100px;">17</td>
      <td id="cell18" class="one-cell" rowspan="2" style="height: 100px;">18</td>
      <td id="cell19" class="one-cell">19</td>
      <td id="cell20" class="one-cell">20</td>
    </tr>
    <tr class="row-tr">
      <td id="cell21" class="one-cell">21 i want to go up </td>
      <td id="cell22" class="one-cell">22 i want to go up</td>
      <td id="cell23" class="one-cell">23</td>
      <td id="cell24" class="one-cell">24</td>
      <td id="cell25" class="one-cell">25</td>
      <td id="cell26" class="one-cell">26 i want to go up</td>
      <td id="cell27" class="one-cell">27 i want to go up</td>
    </tr>
    <tr class="row-tr">
      <td id="cell28" class="one-cell">28</td>
      <td id="cell29" class="one-cell" rowspan="4" style="height: 200px;">29</td>
      <td id="cell30" class="one-cell">30</td>
      <td id="cell31" class="one-cell">31</td>
      <td id="cell32" class="one-cell" rowspan="4" style="height: 200px;">32</td>
      <td id="cell33" class="one-cell" rowspan="4" style="height: 200px;">33</td>
      <td id="cell34" class="one-cell" rowspan="4" style="height: 200px;">34</td>
    </tr>
    <tr class="row-tr">
      <td id="cell35" class="one-cell">35 i want to go up</td>
      <td id="cell36" class="one-cell">36</td>
      <td id="cell37" class="one-cell">37 i want to go up</td>
      <td id="cell38" class="one-cell">38 i want to go up</td>
      <td id="cell39" class="one-cell">39</td>
      <td id="cell40" class="one-cell">40</td>
      <td id="cell41" class="one-cell">41</td>
    </tr>
    <tr class="row-tr">
      <td id="cell42" class="one-cell">42</td>
      <td id="cell43" class="one-cell">43</td>
      <td id="cell44" class="one-cell" rowspan="6" style="height: 300px;">44</td>
      <td id="cell45" class="one-cell">45</td>
      <td id="cell46" class="one-cell">46</td>
      <td id="cell47" class="one-cell">47</td>
      <td id="cell48" class="one-cell">48</td>
    </tr>
    <tr class="row-tr">
      <td id="cell49" class="one-cell">49 i want to go up</td>
      <td id="cell50" class="one-cell">50 i want to go up</td>

Answer 1

在列上使用行跨后，它将占用下面的列空间。

当其他平行列留下一个占位符时，该占位符需要用另一个表行填充，该表行仅包含未跨越的列数。

<table border="1" cellpadding="5">
  <tr>
      <td>0</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
  </tr>
  
  <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
      <td>10</td>
      <td>11</td>
      <td>12</td>
      <td>13</td>
  </tr>
  <tr>
      <td>14</td>
      <td>15</td>
      <td rowspan="2">16</td>
      <td rowspan="2">17</td>
      <td>18</td>
      <td>19</td>
      <td>20</td>
  </tr>
  <tr>
    <td>21</td>
    <td>22</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
  </tr>
  <tr>
      <td>28</td>
      <td>29</td>
      <td>30</td>
      <td>31</td>
      <td>32</td>
      <td>33</td>
      <td>34</td>
  </tr>
  <tr>
      <td>35</td>
      <td>36</td>
      <td>37</td>
      <td>38</td>
      <td>39</td>
      <td>40</td>
      <td>41</td>
  </tr>
  <tr>
      <td>42</td>
      <td>43</td>
      <td>44</td>
      <td>45</td>
      <td>46</td>
      <td>47</td>
      <td>48</td>
  </tr>
  <tr>
      <td>49</td>
      <td>50</td>
      <td>51</td>
      <td>52</td>
      <td>53</td>
      <td>54</td>
      <td>55</td>
  </tr>
  
</table>

更改高度而不影响整个行的高度

1 个答案: