高级HTML表格行格式化

huangapple go评论60阅读模式
英文:

Advanced html table row formatting

问题

我是新手网页开发者,已经花了几个小时试图解决我遇到的问题。

为了简洁,我正在开发一个个人项目。我有一个在移动视图上显示不好看的表格:

高级HTML表格行格式化

这个截图显示了一行数据。我想要的是在表格中只有3列,并且跨越这三列显示时间戳。

类似这样(请原谅我的绘图技巧):

高级HTML表格行格式化

白色方块代表我当前表格中的一行数据。您可以看到时间戳在左下角锚定,并且可以跨越所有3列。列之间用“看不见”的边框分隔(我在演示目的中绘制它,以表示整个表格行跨度的对齐)。

到目前为止,我的代码(.cshtml)如下(基本表格):

<table class="table table-hover" style="align-content:center">
	<thead>
		<tr>
			<th scope="col">Timestamp</th>
			<th scope="col">Coffee pod</th>
			<th scope="col">Coffee machine</th>
			<th scope="col">Person</th>
		</tr>
	</thead>
	<tbody>
		@{foreach(var consumptionElement in Model.ConsumptionLog)
		{
		<tr>
			<th scope="row">
				<a>@consumptionElement.ConsumptionTimestamp.ToString("dd.MM.yyyy")</a>
				<a>@consumptionElement.ConsumptionTimestamp.ToString("HH:mm:ss")</a>
			</th>
			<td>
				<figure>
					<img src="@consumptionElement.CoffeePod.PodPictureDisplay" alt="Coffee pod image" width="100px">
					<figcaption>@consumptionElement.CoffeePod.Name (@consumptionElement.CoffeePod.Brand)</figcaption>
				</figure>
			<td>
				<figure>
					<img src="@consumptionElement.CoffeeMachine.ImageDisplay" alt="Coffee machine image" width="50px">
					<figcaption>@consumptionElement.CoffeeMachine.Nickname</figcaption>
				</figure>
			</td>
			<td>
				<figure>
					<img src="@consumptionElement.Person.ProfilePictureDisplay" alt="Person profile image" width="100px">
					<figcaption>@consumptionElement.Person.FullName</figcaption>
				</figure>
			</td>
		</tr>
		}}
	</tbody>
</table>

我已经尝试过多种解决方案,比如在表格中放置表格,但这只会混乱整个表格的列对齐。

提前感谢您的帮助。

英文:

I am new to web development and have been struggling for hours trying to fix this issue I'm having.

To keep things short I am working on a personal-use project. I have a table that is not displaying nicely on mobile views:

高级HTML表格行格式化

This screenshot shows one row of data. What I want to do is have only 3 columns in the table and display timestamp across all three columns.

Something like this (pardon my drawing skills):

高级HTML表格行格式化

White square represents one row of data on my current table. You can see that the timestamp is bottom left anchored and it can span across all 3 columns. Columns are separated with an "invisible" border (I draw it for demo purposes, to represent alignment of columns across the whole table rowspan).

So far my code (.cshtml) looks like this (basic table):

&lt;table class=&quot;table table-hover&quot; style=&quot;align-content:center&quot;&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th scope=&quot;col&quot;&gt;Timestamp&lt;/th&gt;
			&lt;th scope=&quot;col&quot;&gt;Coffee pod&lt;/th&gt;
			&lt;th scope=&quot;col&quot;&gt;Coffee machine&lt;/th&gt;
			&lt;th scope=&quot;col&quot;&gt;Person&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tbody&gt;
		@{foreach(var consumptionElement in Model.ConsumptionLog)
		{
		&lt;tr&gt;
			&lt;th scope=&quot;row&quot;&gt;
				&lt;a&gt;@consumptionElement.ConsumptionTimestamp.ToString(&quot;dd.MM.yyyy&quot;)&lt;/a&gt;
				&lt;a&gt;@consumptionElement.ConsumptionTimestamp.ToString(&quot;HH:mm:ss&quot;)&lt;/a&gt;
			&lt;/th&gt;
			&lt;td&gt;
				&lt;figure&gt;
					&lt;img src=&quot;@consumptionElement.CoffeePod.PodPictureDisplay&quot; alt=&quot;Coffee pod image&quot; width=&quot;100px&quot;&gt;
					&lt;figcaption&gt;@consumptionElement.CoffeePod.Name (@consumptionElement.CoffeePod.Brand)&lt;/figcaption&gt;
				&lt;/figure&gt;
			&lt;td&gt;
				&lt;figure&gt;
					&lt;img src=&quot;@consumptionElement.CoffeeMachine.ImageDisplay&quot; alt=&quot;Coffee machine image&quot; width=&quot;50px&quot;&gt;
					&lt;figcaption&gt;@consumptionElement.CoffeeMachine.Nickname&lt;/figcaption&gt;
				&lt;/figure&gt;
			&lt;/td&gt;
			&lt;td&gt;
				&lt;figure&gt;
					&lt;img src=&quot;@consumptionElement.Person.ProfilePictureDisplay&quot; alt=&quot;Person profile image&quot;
						width=&quot;100px&quot;&gt;
					&lt;figcaption&gt;@consumptionElement.Person.FullName&lt;/figcaption&gt;
				&lt;/figure&gt;
			&lt;/td&gt;
		&lt;/tr&gt;
		}}
	&lt;/tbody&gt;
&lt;/table&gt;

I have been playing around and trying multiple solutions, like placing a table in table, but all that does it messes up the alignment of columns across the table.

Thank you for your help in advance.

答案1

得分: 1

CSS Grid非常适用于在行内将时间戳表单元格展开并跨越行中的其他三个表单元格的布局。将表行设置为CSS Grid(display: grid;),并使用grid-template-areas来布局行。

/* 显示每个表列(即<td>单元格)具有相同的宽度。每列占据<thead>和<tbody>父元素宽度的1/3。 */
thead tr,
tbody tr {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(3, 1fr);
}

/* 将时间戳表单元格显示在pod/machine/profile列下方,并将时间戳表单元格内容分布到三列中。 */
tbody tr {
    grid-template-areas:
        'pod machine profile'
        'time time time';
}

td.coffee-pod {
    grid-area: pod;
}

td.coffee-machine {
    grid-area: machine;
}

td.profile-picture {
    grid-area: profile;
}

td.time-stamp {
    grid-area: time;
}

以上是CSS Grid的样式设置部分。不包括代码部分。

英文:

CSS Grid works well for the layout of spreading the time stamp table cell below and across the three other table cells in the row. Set the table row to display as a CSS Grid (display: grid;) and use grid-template-areas to layout the row.

/* Display each table column (i.e. &lt;td&gt; cell) with the 
    same width. Each column takes up 1/3 of the width 
    of the &lt;thead&gt; and &lt;tbody&gt; parent elements.
*/
thead tr,
tbody tr {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: repeat(3, 1fr);
}

/* Display the time stamp table cell below the
    pod/machine/profile columns and spread the 
    time stamp table cell content across the
    three columns. */
tbody tr {
    grid-template-areas:
        &#39;pod machine profile&#39;
        &#39;time time time&#39;;
}

td.coffee-pod {
    grid-area: pod;
}

td.coffee-machine {
    grid-area: machine;
}

td.profile-picture {
    grid-area: profile;
}

td.time-stamp {
    grid-area: time;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

/* -----------------------------------------
    Table layout 
*/


/* https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns */


/* Display each table column (i.e. &lt;td&gt; cell) with the 
    same width. Each column takes up 1/3 of the width 
    of the &lt;thead&gt; and &lt;tbody&gt; parent elements.
*/

thead tr,
tbody tr {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(3, 1fr);
}


/* Display the time stamp table cell below the
    pod/machine/profile columns and spread the 
    time stamp table cell content across the
    three columns. */

tbody tr {
  grid-template-areas: &#39;pod machine profile&#39; &#39;time time time&#39;;
}

td.coffee-pod {
  grid-area: pod;
}

td.coffee-machine {
  grid-area: machine;
}

td.profile-picture {
  grid-area: profile;
}

td.time-stamp {
  grid-area: time;
}

td figure {
  display: grid;
}


/* -----------------------------------------
    Table styles 
*/

td img {
  height: 100px;
}

.coffee-pod img {
  width: 100px;
}

.coffee-machine img {
  width: 50px;
}

.profile-picture img {
  width: 100px;
}


/* -----------------------------------------
    Temporary borders for layout display 
*/

tbody td {
  border: 1px solid blue;
}

tbody td.time-stamp {
  border: 1px solid grey;
}

tbody td img {
  border: 1px solid green;
}

<!-- language: lang-html -->

&lt;table class=&quot;table table-hover&quot; style=&quot;align-content:center&quot;&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th scope=&quot;col&quot;&gt;Coffee pod&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;Coffee machine&lt;/th&gt;
      &lt;th scope=&quot;col&quot;&gt;Person&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td class=&quot;time-stamp&quot;&gt;
        &lt;a&gt;26.02.2023&lt;/a&gt;
        &lt;a&gt;11:30:15&lt;/a&gt;
      &lt;/td&gt;
      &lt;td class=&quot;coffee-pod&quot;&gt;
        &lt;figure&gt;
          &lt;img src=&quot;/images/coffee-pod.jpg&quot; alt=&quot;Coffee pod image&quot;&gt;
          &lt;figcaption&gt;Coffee name and brand&lt;/figcaption&gt;
        &lt;/figure&gt;
        &lt;td class=&quot;coffee-machine&quot;&gt;
          &lt;figure&gt;
            &lt;img src=&quot;/images/coffee-machine.jpg&quot; alt=&quot;Coffee machine image&quot;&gt;
            &lt;figcaption&gt;Coffee machine nickname&lt;/figcaption&gt;
          &lt;/figure&gt;
        &lt;/td&gt;
        &lt;td class=&quot;profile-picture&quot;&gt;
          &lt;figure&gt;
            &lt;img src=&quot;/images/profile-picture.jpg&quot; alt=&quot;Person profile image&quot;&gt;
            &lt;figcaption&gt;Person&#39;s full name&lt;/figcaption&gt;
          &lt;/figure&gt;
        &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年2月27日 04:23:58
  • 转载请务必保留本文链接:https://go.coder-hub.com/75574810.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定