HTML 表格列对齐使用 spring

如何解决HTML 表格列对齐使用 spring

我试图在表格中心的列中制作文本,但即使更改了 HTML 和 CSS,它似乎也不起作用。我使用 spring 作为框架。 HTML如下:

<form>

 

        <table class="Box-element" th:if="${ not#lists.isEmpty(kitchenRecipes)}">
            <div class="header">Available meals</div>
            <tr>
                <th style="padding-left: 50px">Image</th>
                <th>Meal</th>
                <th>Calories</th>
                <th>Order</th>
            </tr>
            <tr th:each="kitchenRecipe : ${kitchenRecipes}">
                <td style="float: left!important; margin-left: 10px!important;"><img class="row-image" src="https://www.pikpng.com/pngl/b/64-643199_simple-food-coming-soon-food-clipart.png"></td>
                <td style="text-align:center; vertical-align: middle;"><a th:text="${kitchenRecipe.recipeDto.title}"></a></td>
                <td style="text-align:center; vertical-align: middle;"><a th:text="${kitchenRecipe.recipeDto.calories}"></a>Calories</td>
                <td style="text-align:center; vertical-align: middle;"><a th:href="@{/order/{kitchenId}/{recipeId}(kitchenId=${kitchenRecipe.kitchenDto.id},recipeId=${kitchenRecipe.recipeDto.id})}">View</a></td>
            </tr>
        </table>
</form>

CSS 是:

.Box-element{
    Box-shadow:hsl(0,0%,90%) 10 10 16px;
    background-color: #ff416c;
    border-radius: 4px;
    padding: 10px;
    margin-bottom:30px;
    background: -webkit-linear-gradient(to right,#ff4b2b,#ff416c);
    background: linear-gradient(to right,#ff416c);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 0 0;
    text-align: center;
    vertical-align: middle;
}

 

.header {
   background: #ff416c;
   background: -webkit-linear-gradient(to right,#ff416c);
   background: linear-gradient(to right,#ff416c);
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 0 0;
   color: white;
   font-size: 1.5em;
   padding: 1rem;
   text-align: center;
   text-transform: uppercase;
}

但是表格看起来像:

Unaligned Table

我不知道为什么 HTML 或 CSS 都没有解决这个问题。任何帮助将不胜感激。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?