Question

我一般都不是HTML的人，也是这个网站的新手，所以我不知道怎么问我的问题，但是就这样。我正在一个学校项目上工作，我应该在其中创建一个表格，该表格在每个单元格（单选按钮，复选框，不同的字体类型等）中都有一堆与HTML相关的元素，并且该表格的底部在最后一行中，要求我在其中放置按钮，并使每个按钮伸展以覆盖整个桌子宽度的1/3。我的表总共有5列，因此只需将三个按钮写在一行上，最后会留下2个空的列空间。我已经尝试过在网上搜寻答案，但是遇到的单个论坛或网站都没有与我的问题相关的任何内容，因此来到这里是我的最后选择。我尝试将width =“ 33％”直接放入元素中，但这只会使整个列占据整个页面的33％，这不是我想要的。希望有人知道该怎么做，因为我全神贯注。

<!DOCTYPE html>
<html>

<body>
  <form>
    <table border="1">
      <tr>
        <td><i><p>It's February<br>
		There is a Christmas tree<br>
		in the field across the way;<br>
		the strength of shoulders<br>
		on the back of the chair<br>
		your yesterday's shirt<br>
		in the corner of my bedroom,<br>
		new and fresh<br>
		it was not there before.<br>
		and in the dim light<br>
		my old mirror shows my face young.</p></i></td>

        <td><input type="checkbox">Brandon<br>
          <input type="checkbox">George<br>
          <input type="checkbox">Sam<br>
          <input type="checkbox">Emily<br>
          <input type="checkbox">Sarah<br></td>

        <td><input type="radio" name="name1">Harry<br>
          <input type="radio" name="name1">Veronica<br>
          <input type="radio" name="name1">Garry<br>
          <input type="radio" name="name1">John<br>
          <input type="radio" name="name1">Ivan<br></td>

        <td colspan="2"><img src="mount fuji.jpg" height="200" width="200"><br>
          <p style="text-align:center">Mount Fuji</p>
        </td>
      </tr>

      <tr>
        <td rowspan="2" style="font-size:60%">The book I am currently reading<br> is George Orwell's "1984". It's a<br> postapocalyptic story about a world<br> where after a great war took place<br> a faction named "The Party" took over<br> and began to impose their tyranical<br> views upon
          its subjects. It follows<br> a middle-aged man named Winston as<br> he seeks to find out the truth about<br> "The Party" and if he can even escape<br> their evil grasp.</td>

        <td colspan="2"><img src="toronto.jpg" height="100" width="200"></td>

        <td style="text-align:center">John, Smith</td>

        <td><input type="text"></td>
      </tr>

      <tr>
        <td colspan="2"><img src="hawes.jpg" height="100" width="200"></td>

        <td>The Wizard of OZ</td>

        <td>
          <select name="numbers">
            <option value="2">2</option>
            <option value="1">1</option>
            <option value="4">4</option>
            <option value="7">7</option>
          </select>
        </td>
      </tr>

      <input type="hidden" name="Brandon Kharazmi" value="214790158">

      <tr align="center">
        <td align="center"><button type="button">Button1</button></td>
        <td align="center"><button type="button">Button2</button></td>
        <td align="center"><button type="button">Button3</button></td>
      </tr>

    </table>
  </form>
</body>

</html>

花了我一段时间，但我终于学会了如何发布代码。

Here's what it looks like currently

Answer 1

colspan是您要查找的属性。它使一个单元格占用多列。

<td colspan="3">

td {
  border: 1px solid black;
}

<table>
  <tr>
    <td>single</td>
    <td>single</td>
  </tr>
  <tr>
    <td colspan="2">double</td>
  </tr>
</table>

Answer 2

我想这就是你想要的。在正文div内的style="width:XX"上，设置每个div的宽度。由于某些原因，这2个Divs总共可以占据99％。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { margin:0; /* This is used to reset any browser-default margins */ }

div.main{
    height:100vh;
    width:100%;
}
div.border{
    border-width:0.1px;
    border-style: solid;
    border-color: black;
}
div.left{
float:left;
overflow:hidden;
}
div.right{
float:left;

overflow:hidden;
}
#left{

}
#right{

} 
</style>
</head>
<body>
<div class="main">

<div class="border left" style="width:69%">almost 70%, in fact is 69%</div>
<div class="border right" style="width:30%">30%</div>
<div class="border left" style="width:30%">30%</div>
<div class="border right" style="width:69%">almost 70%, in fact is 69%</div>

</div>
</body>
</html>

HTML表格自定义单元格宽度的

2 个答案: