Question

我正在尝试用HTML创建一个“注册”页面，并将表格放在中间。但是，当我将桌子移到中间时，的间距很大。我尝试了“ cellspacing”，但是自从我使用HTML5以来，它不起作用。我还尝试了“ border-spacing：0px;”但它也不起作用。

我正在使用最新版本的Chrome和Sublime Text

代码：

body {
  background-color: #8F3985;
}

table.tablo {
  background-color: #07BEB8;
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  height: 650px;
  border-spacing: 0px;
}

table {
  border-spacing: 0px;
}

<form>
  <table class="tablo">
    <tr>
      <td>
        <h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
      </td>
    </tr>
    <tr>
      <td>
        Adı:
      </td>
      <td>
        <input type="text" name="">
      </td>
    </tr>
    <tr>
      <td>
        Soyadı:
      </td>
      <td><input type="text" name=""></td>
    </tr>
    <tr>
      <td>
        Cinsiyeti:
      </td>

      <td>
        <input type="radio" name="durum">Erkek
        <input type="radio" name="durum">Kadın
      </td>
    </tr>
    <tr>
      <td>
        Doğum Yeri:
      </td>
      <td>
        <select>
          <option>Bulgaristan</option>
          <option>İstanbul</option>
          <option>Ankara</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        Doğum Tarihi:
      </td>
      <td>
        <select>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
        <select>
          <option>Ocak</option>
          <option>Şubat</option>
          <option>Mart</option>
        </select>
        <select>
          <option>2000</option>
          <option>2001</option>
          <option>2002</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" name="" value="Kaydet">
        <input type="reset" name="" value="Temizle">
      </td>
    </tr>
  </table>
</form>

Answer 1

有时任何样式问题都可能是父控件的样式。在这种情况下，表格嵌套在Form控件内，因此需要先更改Form控件的样式，然后在更改表格位置的样式后更改，并且对于表的填充，空格几乎不变。

body {
  background-color: #8F3985;
}

table.tablo {
  
  background-color: #07BEB8;
  margin-left: auto;
  margin-right: auto;  
  width: 650px;  
  padding: 50px;  
}


form {    
    margin-top:20%;
    margin-left:10%;
    margin-right:10%;
    margin-bottom:20%;
    width: 80%;
}

<form>
  <table class="tablo">
    <tr>
      <td>
        <h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
      </td>
    </tr>
    <tr>
      <td>
        Adı:
      </td>
      <td>
        <input type="text" name="">
      </td>
    </tr>
    <tr>
      <td>
        Soyadı:
      </td>
      <td><input type="text" name=""></td>
    </tr>
    <tr>
      <td>
        Cinsiyeti:
      </td>

      <td>
        <input type="radio" name="durum">Erkek
        <input type="radio" name="durum">Kadın
      </td>
    </tr>
    <tr>
      <td>
        Doğum Yeri:
      </td>
      <td>
        <select>
          <option>Bulgaristan</option>
          <option>İstanbul</option>
          <option>Ankara</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        Doğum Tarihi:
      </td>
      <td>
        <select>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
        <select>
          <option>Ocak</option>
          <option>Şubat</option>
          <option>Mart</option>
        </select>
        <select>
          <option>2000</option>
          <option>2001</option>
          <option>2002</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        <input type="submit" name="" value="Kaydet">
        <input type="reset" name="" value="Temizle">
      </td>
    </tr>
  </table>
</form>

Answer 2

您在寻找这个结果吗？

修改

从height: 650px;中删除了table.table

每行的高度过高，因为您将表格的高度设置为特定值（在您的情况下为650px），并且行高均匀分布。解决方案是删除height属性或根据需要调整高度。

请注意，这不能保证浏览器的兼容性。最好使用经过验证的CSS框架（例如引导程序），以在响应速度和浏览器兼容性方面达到相同的结果。

body {
  background-color: #8F3985;
}

table.tablo {
  background-color: #07BEB8;
  margin-left: auto;
  margin-right: auto;
  width: 600px;
  border-spacing: 0px;
}

table {
  border-spacing: 0px;
}

<form>
  <table class="tablo">
    <tr>
      <td colspan="2">
        <h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
      </td>
    </tr>
    <tr>
      <td width="20%">
        Adı:
      </td>
      <td>
        <input type="text" name="">
      </td>
    </tr>
    <tr>
      <td>
        Soyadı:
      </td>
      <td><input type="text" name=""></td>
    </tr>
    <tr>
      <td>
        Cinsiyeti:
      </td>

      <td>
        <input type="radio" name="durum">Erkek
        <input type="radio" name="durum">Kadın
      </td>
    </tr>
    <tr>
      <td>
        Doğum Yeri:
      </td>
      <td>
        <select>
          <option>Bulgaristan</option>
          <option>İstanbul</option>
          <option>Ankara</option>
        </select>
      </td>
    </tr>
    <tr>
      <td>
        Doğum Tarihi:
      </td>
      <td>
        <select>
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
        <select>
          <option>Ocak</option>
          <option>Şubat</option>
          <option>Mart</option>
        </select>
        <select>
          <option>2000</option>
          <option>2001</option>
          <option>2002</option>
        </select>
      </td>
    </tr>
    <tr>
      <td colspan="2">
        <input type="submit" name="" value="Kaydet">
        <input type="reset" name="" value="Temizle">
      </td>
    </tr>
  </table>
</form>

Answer 3

这些属性应该起作用。

table {
    max-width: 100%;
    border-spacing: 0;
    border-collapse: collapse;
}
tbody, tr {
    width: 100%;
}
table.tablo, table.tablo * {
    box-sizing: border-box;
}
table.tablo {
    width: 600px;
    margin-right: auto;
    margin-left: auto;
    background-color: #07beb8;
}
table.tablo td {
    width: 50%;
    vertical-align: top;
    padding: 0; /* change in whitespace you like */
}
table.tablo td:first-child {
    width: 100%;
}

并用作标题

<tr>
    <td colspan="2">
        <h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
    </td>
</tr>

Answer 4

在CSS代码中，您已修复了 height = 600px ，它实际上控制了表格的内部尺寸，并将表格拉伸为 600px 。要使用 border-spacing ，只需删除表格的 height 并更新 border-spacing 的值，然后它将向您显示您要在其中使用的实际间距。

我在下面更新了您的代码，只需运行即可享受;）

<!DOCTYPE html>
<html>
<style type="text/css">
	body{
		background-color:#8F3985;
	}
	table.tablo{
 		background-color:#07BEB8;
    	margin-left:auto;
	    margin-right: auto;
	    width:600px;
	    border-spacing: 5px;
	}
</style>
<head>
	<title></title>
</head>
<body>
	<form>
		<table class="tablo">
			<tr>
				<td>
					<h3 style="text-align:center;">Kullanıcı Bilgileri</h3>
				</td>
			</tr>
			<tr>
				<td>
					Adı:
				</td>
				<td>
					<input type="text" name="">
				</td>
			</tr>
			<tr>
				<td>
					Soyadı:
				</td>
				<td><input type="text" name=""></td>
			</tr>
			<tr>
				<td>
					Cinsiyeti:
				</td>

				<td>
					<input type="radio" name="durum">Erkek
					<input type="radio" name="durum">Kadın
				</td>
			</tr>
			<tr>
				<td>
					Doğum Yeri:
				</td>
				<td>
					<select>
						<option>Bulgaristan</option>
						<option>İstanbul</option>
						<option>Ankara</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					Doğum Tarihi:
				</td>
				<td>
					<select>
						<option>1</option>
						<option>2</option>
						<option>3</option>
					</select>
					<select>
						<option>Ocak</option>
						<option>Şubat</option>
						<option>Mart</option>
					</select>
					<select>
						<option>2000</option>
						<option>2001</option>
						<option>2002</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					<input type="submit" name="" value="Kaydet">
					<input type="reset" name="" value="Temizle">
				</td>
			</tr>
		</table>
	</form>

</body>
</html>

无法删除<td>之间的空格

4 个答案: