html实现控件判断挑战跳转,HTML表挑战

我非常感谢帮助解决这个问题。我工作的一个HTML表格谜尝试这种形象在这里匹配：HTML表挑战

我把一切都很好，就双方使用行跨度标签两个红色的柱子，有第1，第2，第4，第五排好，但是第三排，我只是无法将三个紫色的矩形放在中心位置，并在不打破桌子的情况下调整到较小的尺寸。

Untitled Document

body { background-color:black;}

table { background-color:white;

margin: 0px auto;

width:1000px;

height:500px;}

td { width:200px;

height:100px;

}

2015-11-07

Nickolas

+0

虽然这里没有实际的数据，但我想不出任何适合该结构的东西。为什么你想用这个表？ –

+0

请勿使用进行设计/布局任务。 –

+0

这只是一个家庭作业练习，不适用于任何实际或图形。谢谢帅哥 –

A

回答

1

你需要更多的列：

body {

background-color: black;

}

table {

background-color: white;

margin: 0px auto;

width: 1000px;

height: 500px;

border: 2px solid white;

}

td {

width: 200px;

height: 100px;

}

.red { background-color: red }

.white { background-color: white }

.green { background-color: green }

.blue { background-color: blue }

.purple { background-color: purple }

2015-11-07 20:08:26

Oriol

+0

更多专栏！而已。非常感谢您的帮助，我非常感谢您的明确和有益的回应。 ++ 你是一个拯救生命的人，我懂得更好的表格。谢谢你Oriol。 –

+0

@Nickolas完全没有:)随时接受答案，如果它解决了您的问题 –

+0

我试着upvoting，并点击复选标记，我相信这是“接受”它是什么。希望如果不让我知道，我会很乐意给你信用。 –

0

这是一种作业练习吗？无论如何，不​​要将你的表格单元居中，而是尝试添加白色表格单元格。你需要更多的专栏。你必须重新计算你的colspan属性。祝你好运！

2015-11-07 19:57:55

armin

+0

是的阿明，这是一项家庭作业练习，只是练习，不适合任何实际。 ; P –

+0

我也很感谢你的时间！ –

0

看起来确实不太复杂。

只需在方格纸上绘制想要的结果，您应该能够立即检测到要使用的正确的rowspan/colspan值。

请注意，在写下HTML时，您需要完全跳过

...，这些单元最终位于序列中之前考虑的单元的“扩展”中。

例如，考虑一个简单的4行×3周的cols表：

td { width:30px; height: 30px; text-align:center; }

1	2	3
4	5	6
7	8	9
A	B	C

如果要合并1和2，你需要在小区1申报colspan=2然后省略细胞2.类似的，如果你想合并5/6/8/9，你需要在单元格5上声明colspan=2rowspan=2并省略合并的：

td { width:30px; height: 30px; text-align: center; }

12		3
4	56 89
7
A	B	C

2015-11-07 20:02:50

6502

+0

谢谢6502，但为什么你会跳过扩展中单元格的表格数据标签？ –

+0

@Nickolas：因为这就是colspan/rowspan的工作方式......想象一下，在表格中，浏览器开始从左到右每行从第一行开始读取，直到最后一行寻找'​​...'定义。如果一个单元由于前一个单元使用了“colspan”/“rowspan”而被“覆盖”，那么该单元就被简单地跳过了。看到添加的例子。 –

+0

哦，ty！ StackOverflow是最好的。 –

0

一种选择可能是Flexbox的。我并不是说这是不是表更好，但是这可能如下进行：

虽然我很喜欢Flexbox的，一台工作至少也针对此问题(尽管如果您想要改变正确的方式，flexbox可能会成为更好的解决方案)。

风格：

#parent {

margin: 0px;

padding: 0px;

padding-left: 20vw;

padding-right: 20vw;

background-color: red;

display: -webkit-flex;

display: flex;

-webkit-flex-direction: column;

flex-direction: column;

-webkit-align-items: stretch;

align-items: stretch;

height: 100vh;

}

.row, .row-sm {

padding: 2px;

padding-bottom: 0px;

flex: 1;

background-color: white;

display: -webkit-flex;

display: flex;

-webkit-flex-direction: row;

flex-direction: row;

-webkit-align-items: stretch;

align-items: stretch;

}

.row:last-child {

padding-bottom: 2px;

}

.row > div {

flex: 1;

}

#centered {

-webkit-justify-content: center;

justify-content: center;

}

#centered > div {

flex: initial;

width: 40%;

background-color: #655900;

}

#sm3 {

flex: .5;

/* This would not require the spacing divs; however, the start and end gap would be half the size it should be

-webkit-justify-content: space-around;

justify-content: space-around;

*/

}

#sm3 > div {

width: 16.6666%;

background-color: white;

}

#sm3 > div:nth-child(even) {

background-color: #111155;

}

.blue {

background-color: blue;

}

.green {

background-color: green;

}

.purple {

background-color: purple;

}

注：虽然这个版本尺度，也有可能被调整为具有固定内容的大小;然而，无论如何，固定内容大小可以轻松完成，只需div宽度宽度/高度填充等。

2015-11-07 20:56:07

csga5000

+0

嘿csga谢谢你让我知道flexbox，这是甜心的人。这是在HTML表格上进行的练习。 ;) –

+0

@Nickolas当然！我想你需要一个表格相关的答案;不过，我认为这对任何偶然发现你的问题寻找相关信息的人都有用。 –