c:forEach 在单个 table 行中显示所有内容

Question

目前我正在做一个项目，我需要在我的数据库的一列中显示信息，但由于某种原因它们显示在一行中。现在显示如下：

我还附上了我的 jsp 页面中的代码：

<table border="1"
       cellspacing="0" cellpadding="3"
       style="font-size: small; line-height: 100px; border-color: #D1EEEE">
    <tr bgcolor="#DCDCDC" align="left" style="border-color: #838B83">
        <th width="250px">Discipline</th>
        <th width="100px">Mark</th>
    </tr>

    <c:forEach items="${Disc}" var="Dis">
        <td style="padding-bottom: 20px">${Dis.discipline}</td>
        <td style="padding-bottom: 20px">0</td>
    </c:forEach>

    <td/>
</table>

这是怎么引起的，我该如何解决？

Answer 1

Boostrap 是个不错的主意（在 Bhola Galy 的回答中提到并链接）。但是，如果您出于某种原因确实需要使用 table，请知道 <tr> 代表“table 行”。 <td> 标签和结束标签包含一个数据单元格。 <th> 是 table header.

MDN's article on table basics 很有用。

不确定这是否正是您的意思，但在下面我添加了 <tr>s 将您可能想要的内容包装成一行。在单个 <tr> 内，放置在那里的元素将排成一行。

此示例只是您代码段的一个子集，但可能会说明原理。

<table cellspacing="0">
    <tr>
        <td>
            <table border="1" cellspacing="0" cellpadding="3"
                style="font-size: small; line-height: 25px; border-color: #D1EEEE">
                <tr>
                    <th>Name</th>
                    <td style="vertical-align: middle;">(Name here)</td>
                </tr>
                <tr>
                    <th>Surname</th>
                    <td style="vertical-align: middle;">(Surname here)</td>
                </tr>
                <tr>
                    <th>Group</th>
                    <td style="vertical-align: middle;">(Group here)</td>
                </tr>
                <tr>
                    <th>Date of enrollment</th>
                    <td style="vertical-align: middle;">(Date here)</td>
                </tr>

            </table>
        </td>
    </tr>
</table>

大多数互联网用户使用的设备屏幕尺寸差别很大。默认情况下 Bootstrap 承认需要响应不同的屏幕尺寸。

Answer 2

我设法找到了解决方案 - 很明显。有必要：将 <tr> 和 </tr> 添加到循环中。删除晦涩难懂的 <td/>.

               <table>
                    <tr>
                        <td style="padding: 50px 0 0 0">
                            <table border="1"
                                   cellspacing="0" cellpadding="3"
                                   style="font-size: small; line-height: 100px; border-color: #D1EEEE">
                                <tr bgcolor="#DCDCDC" align="left" style="border-color: #838B83">
                                    <th width="250px">Discipline</th>
                                    <th width="100px">Mark</th>
                                </tr>


                                    <c:forEach items="${Disc}" var="Dis">
                                <tr>
                                <td style="padding-bottom: 20px">${Dis.discipline}</td>
                                        <td style="padding-bottom: 20px">0</td>
                                </tr>
                                </c:forEach>
                                
                            </table>

c:forEach 在单个 table 行中显示所有内容

c:forEach displays everything in a single table row

jsp

jstl

html-table