Question

我最近进入网络开发，我正面临着与htmland对齐的一些问题。我已浏览过各种网站＆amp;尝试使用align =“left”/ right / center但我不能只调整它们。请指导我如何进步。

这就是我试图创建

的内容

这就是我最终的结果。请指导我

这是我所做的准则。对不起，如果我犯了任何基本错误。你通过犯错来学习。我添加了我的CSS，但我不知道为什么它没有在代码片段中更新。

.boxUp {
	background-color: #dedacf;
	border-color: #dedacf #dedacf #dedacf #dedacf;
	border-style: solid;
	border-width: 1px 1px 1px 5px;
}

<table border="0" cellpadding="0" cellspacing="0" width="100%">
	<tr>
		<td class="boxup">
			<table border="0" cellpadding="0" cellspacing="0" width="100%">
				<tr>
					<td align="right" style="width: 25%">dropdown:</td>
					<td align="left" style="width: 25%">
					<select name="dropdown" class="pulldown1" id="dropdown">
					<option value="Dubai">Dubai</option>
					<option value="Domestic 2">Arabia</option>
					<td align="right" style="width: 25%">textbox:</td>
					<td style="width: 25%"><input name="textbox" type="text"
						size="3" maxlength="3" class="tType1" value=""></td>
				</tr>
			</table>
		</td>
	</tr>

Answer 1

OP的表格在其单元格中有一个表格，仅此一点就会使布局变得困难。 select元素需要一个结束标记，它也包含<td>。已为两个表添加了border-spacing:5px，并为<td>添加了表格和红色虚线边框的黑色边框。

请参阅代码段2以获得更正版本。

这是您需要的唯一CSS：

table {
  border-spacing: 0;
  border-collapse: separate;
}

将border-spacing属性调整为px，em等中的任何属性。以下代码段演示了该属性。您可以动态调整表格border-spacing。

SNIPPET 1

var in1 = document.getElementById('in1');

in1.addEventListener('change', function(e) {
  var x = document.getElementById('tableX');
  var num = parseInt(this.value, 10);
  x.style.borderSpacing = num + "px";
}, false);

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>TABLE</title>

  <style>
    table.x {
      position: relative;
      padding: 0;
      box-shadow: 0 1px 9px 1px #ccc;
      border-radius: 6px;
      margin: 20px auto;
      table-layout: fixed;
      width: 90%;
      height: 100%;
    }
    .x th {
      color: #FFF;
      background: #2C7EDB;
      padding: 10px;
      text-align: center;
      vertical-align: middle;
    }
    .x tr:nth-child(odd) {
      background-color: #333;
      color: #FFF;
    }
    .x tr:nth-child(even) {
      background-color: #D3E9FF;
      color: #333;
    }
    .x td {
      border-style: solid;
      border-width: 1px;
      border-color: #264D73;
      padding: 5px;
      text-align: left;
      vertical-align: top;
      position: relative;
    }
    .x thead th:first-child {
      border-top-left-radius: 6px;
    }
    .x thead th:last-child {
      border-top-right-radius: 6px;
    }
    .x tbody tr:first-child td:first-child {
      border-top-left-radius: 6px;
    }
    .x tbody tr:first-child td:last-child {
      border-top-right-radius: 6px;
    }
    .x tbody tr:last-child td:first-child {
      border-bottom-left-radius: 6px;
    }
    .x tbody tr:last-child td:last-child {
      border-bottom-right-radius: 6px;
    }
    .x thead + tbody tr:first-child td:first-child {
      border-top-left-radius: 0;
    }
    .x thead + tbody tr:first-child td:last-child {
      border-top-right-radius: 0;
    }
    input {
      width: 6ex;
    }
    /* THIS IS THE ONLY CSS YOU NEED */
    table {
      border-spacing: 0;
      border-collapse: separate;
      }
  </style>
</head>


<body>
  <section id="ii">
    <header>
      <label>Border-Spacing:
        <input id='in1' type='number' min='0' max='15' value='0'>
      </label>
    </header>
    <table id="tableX" class="x" width='90%'>
      <thead>
        <tr>
          <th id="h0">Header: 0</th>
          <th id="h1">Header: 1</th>
          <th id="h2">Header: 2</th>
          <th id="h3">Header: 3</th>
          <th id="h4">Header: 4</th>
        </tr>
      </thead>
      <tbody>
        <tr id="r0">
          <td id="c0r0" class="cell">Cell: 0,0</td>
          <td id="c0r1" class="cell">Cell: 0,1</td>
          <td id="c0r2" class="cell">Cell: 0,2</td>
          <td id="c0r3" class="cell">Cell: 0,3</td>
          <td id="c0r4" class="cell">Cell: 0,4</td>
        </tr>
        <tr id="r1">
          <td id="c1r0" class="cell">Cell: 1,0</td>
          <td id="c1r1" class="cell">Cell: 1,1</td>
          <td id="c1r2" class="cell">Cell: 1,2</td>
          <td id="c1r3" class="cell">Cell: 1,3</td>
          <td id="c1r4" class="cell">Cell: 1,4</td>
        </tr>
        <tr id="r2">
          <td id="c2r0" class="cell">Cell: 2,0</td>
          <td id="c2r1" class="cell">Cell: 2,1</td>
          <td id="c2r2" class="cell">Cell: 2,2</td>
          <td id="c2r3" class="cell">Cell: 2,3</td>
          <td id="c2r4" class="cell">Cell: 2,4</td>
        </tr>
        <tr id="r3">
          <td id="c3r0" class="cell">Cell: 3,0</td>
          <td id="c3r1" class="cell">Cell: 3,1</td>
          <td id="c3r2" class="cell">Cell: 3,2</td>
          <td id="c3r3" class="cell">Cell: 3,3</td>
          <td id="c3r4" class="cell">Cell: 3,4</td>
        </tr>
        <tr id="r4">
          <td id="c4r0" class="cell">Cell: 4,0</td>
          <td id="c4r1" class="cell">Cell: 4,1</td>
          <td id="c4r2" class="cell">Cell: 4,2</td>
          <td id="c4r3" class="cell">Cell: 4,3</td>
          <td id="c4r4" class="cell">Cell: 4,4</td>
        </tr>
      </tbody>
    </table>

  </section>

</body>

</html>

SNIPPET 2

table {
  border-spacing: 5px;
  border: 1px solid black;
}
td {
  border: 3px dashed red;
}
.boxUp {
  background-color: #dedacf;
  border-color: #dedacf #dedacf #dedacf #dedacf;
  border-style: solid;
  border-width: 1px 1px 1px 5px;
}

<table border="0" cellpadding="0" cellspacing="0" width="100%">
  <tr>
    <td class="boxup">
      <table border="0" cellpadding="0" cellspacing="0" width="100%">
        <tr>
          <td align="right" style="width: 25%">dropdown:</td>
          <td align="left" style="width: 25%">
            <select name="dropdown" class="pulldown1" id="dropdown">
              <option value="Dubai">Dubai</option>
              <option value="Domestic 2">Arabia</option>
            </select>
          </td>
          <td align="right" style="width: 25%">textbox:</td>
          <td style="width: 25%">
            <input name="textbox" type="text" size="3" maxlength="3" class="tType1" value="">
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

如何在td之间创建空间并对齐td内的内容

1 个答案:

SNIPPET 1

SNIPPET 2