表格后的按钮会自动添加为一行。 如何区分它们？

Question

I have created a struts2 application about Student Database. The problem is that whenever I add a submit button after showing the database in table, the button is surrounded by a big background similar to that of the row width of the table before it. I want to remove that border.

Here is the image how it looks:

See, how there is a grey background around the home button, I don't want that.

Here is a snippet of the code: JSP:

<table>
            <tr>
            <th>RollNo:</th>
            <th>Name:</th>
            <th>DOB:</th>
            <th>Gender:</th>
            <th>Address:</th>
            </tr>
            <%
            while(rs.next())
            {

            %>
                    <tr>
                    <td><%=rs.getInt(1) %></td>
                    <td><%=rs.getString(2) %></td>
                    <td><%=rs.getString(3) %></td>
                    <td><%=rs.getString(4) %></td>
                    <td><%=rs.getString(5) %></td>
                    </tr>
                   <%

                }
                %>
        </table>
        <%
        rs.close();
        stmt.close();
        conn.close();
    }
    catch(Exception e)
    {
        e.printStackTrace();
    }


    %>
    </div>
    <br><br>

    <s:form action="home.jsp">
        <s:submit class="button4" value="Home"></s:submit>
    </s:form>

table.css file:

table {
    background-color: #dbdbdb;
    width: 60%;
}

th,td {
    color: #363b3f;
    border-bottom: 1px solid #ddd;
}

tr:nth-child(even) {
    background-color: #c8c8c8
}

tr:hover {
    background-color: #c488d7;
}

button.css

.button4
{
    background-color: #af4ccf; /* purple */
    border: none;
    color: black;
    padding: 18px;
    font-family: 'Amputa';
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 14px;
    margin: 4px 2px;
    border-radius: 30%;
    -webkit-transition-duration: 0.4s; /*Safari*/
    transition-duration: 0.4s;
    cursor: pointer;
}

.button4:hover
{
    background-color: #c986df; /* Light purple */
}

I have tried encapsulating the table and button in separate div. Also I have tried, putting the button in a different table. But nothing works. I can't seem to pinpoint the exact point where it may be going wrong. How and what can I do to make that background border go away and center align the button?

Answer 1

The s:form generated additional HTML elements parsed by the freemarker template used by the tag implementation. It chooses a template based on the theme used by the tag.

You have created CSS for any element on the page including those generated by Struts tags, so the style is inherited.

Using common selectors for all page elements not always fit the design and appearance of the elements on the page. On the other hand qualified selectors narrow its usage to particular content that could be wrapped with the container or other element. You can also qualify your selectors with the id or use class attribute on the table and qualify selectors by class.

Struts uses a few themes for elements generated by UI tags. If you want to custom design your pages with Struts tags that has a minimal effect, then you should use a simple theme.

<s:form action="home.jsp" theme="simple" cssStyle="background-color: none">
    <s:submit class="button4" value="Home"></s:submit>
</s:form>