如何处理响应式表中具有选择输入的 Rowspan 2？

问题描述 投票：0回答：1

我几乎已经有了一个基本的响应式表。 （即下面示例中的表 1。）只有一处错误。

请全屏观看，然后宽度小于700px观看。

Q1：在表 1 中，当小于 700 像素时，

caption
在我的浏览器（Chrome）上分两行。为什么会发生这种情况？怎么让它停止？

问题 2：如果我在一个页面上有多个表格，并且我只希望我的响应式代码只影响其中一个表格，我该怎么做？

表 2 就是问题所在。我的团队及其颜色的行跨度为 2。与每个团队关联的两行属性和人员都与该团队相关。

如果你看小于700px的视图，一切都会出错。球队和颜色仅与属性/球员行之一相关，而不与两者相关。

Q3：如何让“球队”和“颜色”条目与“属性/球员”行同时出现？

注意：每个团队只能有一个带有单个 

id
的选择框。这本身就会造成问题。

表格右侧的 

colspan="2"
在视图中似乎工作正常 <700px.

我的代码：

.myTableLight{
    width: 80%;
    color: white;
    background-color: black;
    margin: 0px auto;
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-color: white;
}
th, td {
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-color: white;
}
tbody tr:nth-child(odd) {
    background: #444;
}
input {
    text-align: right;
}
</style>
<style type="text/css" media="all">
@media
only screen 
and (max-width: 760px) {

/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
    display: block;
    border: none;
}
table {
    border: none !important;
    font-size: 0.8rem;
}
thead {
    display: none;
}
tr {
  border-left: 1px solid white;
  border-right: 1px solid white;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  display: block;
  margin-bottom: .625em;
}
td {
  border-bottom: 1px solid #888;
  display: block;
  text-align: right;
}
tr:nth-child(odd) {
    background: #444;
}
td {
    /* Behave  like a "row" */
    position: relative;
    text-align: right;
}
td:before {
    /* Now like a table header */
    content: attr(td-label);
    position: absolute;
    /* Top/left values mimic padding */
    top: 0;
    left: 6px;
    width: 45%;
    text-align: left;
    padding-right: 10px;
    white-space: nowrap;
}
<body style="width:100%; height: 100%; padding: 0 0 0 0; margin: 0 0 0 0; background:#000000; font-family: 'Arial', sans-serif;">
    <br />
    <br />
    <table class="myTableLight" style="margin: auto;">
        <caption style="font-weight: bold; color: white; text-align: left;">Table 1</caption>
        <thead>
            <tr>
                <th style="width: 20%;">Team</th>
                <th style="width: 10%;">Colour</th>
                <th style="width: 30%;">Attributes</th>
                <th style="width: 40%;">People</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td td-label="Team">A1</td>
                <td td-label="Colour">B1</td>
                <td td-label="Attributes">C1</td>
                <td td-label="People">D1</td>
            </tr>
            <tr>
                <td td-label="Team">A2</td>
                <td td-label="Colour">B2</td>
                <td td-label="Attributes">C2</td>
                <td td-label="People">D2</td>
            </tr>
            </tr>
                <td td-label="Team">A3</td>
                <td td-label="Colour">B3</td>
                <td td-label="Attributes">C3</td>
                <td td-label="People">D3</td>
            </tr>
            <tr>
                <td td-label="Team">A4</td>
                <td td-label="Colour">B4</td>
                <td td-label="Attributes">C4</td>
                <td td-label="People">D4</td>
            </tr>
        </tbody>
    </table>
    <br />
    <table class="myTableLight" style="margin: auto;">
        <caption style="font-weight: bold; color: white; text-align: left;">Table 2</caption>
        <thead>
            <tr>
                <th style="width: 20%;" rowspan="2" >Team</th>
                <th style="width: 10%;" rowspan="2" >Colour</th>
                <th style="width: 30%;" rowspan="2" >Attributes</th>
                <th style="width: 40%;" colspan="2">People</th>
            </tr>
            <tr>
                <th>Person 1</th>
                <th>Person 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2" td-label="Team">
                    Cola
                </td>
                <td rowspan="2" td-label="Colour">
                    <select id="idCola">
                        <option selected>Red</option>
                        <option>Green</option>
                        <option>Blue</option>
                        <option>Yellow</option>
                    </select>
                </td>
                <td td-label="Attributes">C4</td>
                <td td-label="Person 1">
                    <input type="text" id="per1_1" value="D1" />
                </td>
                <td td-label="Person 2">
                    <input type="text" id="per1_2" value="E1" />
                </td>
            </tr>
            <tr>
                <td td-label="Attributes">C2</td>
                <td td-label="Person 1">
                    <input type="text" id="per2_1" value="D2" />
                </td>
                <td td-label="Person 2">
                    <input type="text" id="per2_2" value="E2" />
                </td>
            </tr>
            </tr>
                <td rowspan="2" td-label="Team">
                    Pepsi
                </td>
                <td rowspan="2" td-label="Colour">
                    <select id="idPepsi">
                        <option>Red</option>
                        <option selected>Green</option>
                        <option>Blue</option>
                        <option>Yellow</option>
                    </select>
                </td>
                <td td-label="Attributes">C3</td>
                <td td-label="Person 1">
                    <input type="text" id="per3_1" value="D3" />
                </td>
                <td td-label="Person 2">
                    <input type="text" id="per3_2" value="E3" />
                </td>
            </tr>
            <tr>
                <td td-label="Attributes">C4</td>
                <td td-label="Person 1">
                    <input type="text" id="per4_1" value="D4" />
                </td>
                <td td-label="Person 2">
                    <input type="text" id="per4_2" value="E4" />
                </td>
            </tr>
        </tbody>
    </table>
</body>

css responsive-design responsive-table
1个回答
0
投票

答1

将 

display: block
添加到您的 
caption
即可。

答2

在 CSS 中使用 

class
。设计 HTML 元素的样式从来都不是一个好主意。如果您不了解 CSS 中的类，请查看 this。

答3

无法回答我们的问题，但根据我的理解，类的样式应该足够了。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.