文章/答案/技术大牛

发布

社区首页 >问答首页 >细胞出行

问细胞出行
EN

Stack Overflow用户

提问于 2021-12-18 05:42:22

回答 2查看 75关注 0票数 2

最后三个细胞正在失去控制。如何让他们进入桌子。

“UG(加入日期)”应该就在第一次约会选择器的旁边。

总的来说，这一行应该有5个单元格。

html,body{
    background: rgb(211, 212, 218)
}

.table{
    background-color: rgb(211, 212, 218);
}

<div class="table">
    <table cellpadding="8" border="2" , align="center" style="width: 100%;">
        <form>
            <tr style="background-color: royalblue;">
                <th style="color: white;" colspan="2"> <tt style="font-size: larger;">Acedamic Details</tt></th>
            </tr>
            <tr>
                <th>Student Name</th>
                <td>
                    First Name <label><input type="text"></label>
                    Middle Name <label><input type="text"></label>
                    Last Name <label><input type="text"></label>
                </td>
            </tr>
            

            <tr>
                <th>UG (Date of Joining)</th>
                <td><input type="date"></td>
                <th>UG (Date of Joining)</th>
                <td><input type="date"></td>
                <td>
                  <button title="button title" class="action primary tocart" onclick=" window.open('marks.html'); return false;">Upload Marks</button>
                </td>
              </tr>

        </form>
    </table>
</div>

html

css

回答 2

Stack Overflow用户

发布于 2021-12-18 06:55:38

要使表中的每一行成为表单，可以使用以下结构：

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid rgb(218, 218, 223);
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

.inputs{
  height: 25px;
}

.submitButtons{
  height: 30px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
<table>
  <tr>
    <td>ID</td>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Start Date</td>
    <td>Stop Date</td>
    <td>Save</td>
  </tr>

  <tr>
    <td>
      <form id="form1"><input type="hidden" name="id" value="1" /></form>
    </td>
    <td><input class="inputs" form="form1" type="text" name="name" placeholder="Enter First Name" /></td>
    <td><input class="inputs" form="form1" type="text" name="description" placeholder="Enter Last Name" /></td>
    <td><input class="inputs" form="form1" type="date" value="Save" /></td>
    <td><input class="inputs" form="form1" type="date" value="Save" /></td>
    <td><input class="submitButtons" form="form1" type="button" value="Save" /></td>
  </tr>
  <tr>
    <td>
      <form id="form2"><input type="hidden" name="id" value="2" /></form>
    </td>
    <td><input class="inputs" form="form2" type="text" name="name" placeholder="Enter First Name" /></td>
    <td><input class="inputs" form="form2" type="text" name="description" placeholder="Enter Last Name" /></td>
    <td><input class="inputs" form="form2" type="date" value="Save" /></td>
    <td><input class="inputs" form="form2" type="date" value="Save" /></td>
    <td><input class="submitButtons" form="form2" type="button" value="Save" /></td>
  </tr>
</table>

<script>
    /* Scripts */
</script>
</body>
</html>

票数 1

Stack Overflow用户

发布于 2021-12-18 06:32:57

您的表最多可以有两个td或th，而在最后一个tr上则定义了五个td & th。您真正应该做的是在第一个tr上做colspan=5，而不是做colspan=2；在第二个tr上，用colspan=2做一个，用colspan=3做另一个，然后保持原来的tr。

您的代码应该如下所示：

<table border="1px">
  <tr>
    <td colspan="5">5</td>
  </tr>
  <tr>
    <td colspan="2">2</td>
    <td colspan="3">3</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
</table>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/70401259

复制

相似问题

问细胞出行
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问细胞出行EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问细胞出行
EN