테이블 뒤의 버튼이 자동으로 행으로 추가됩니다. 어떻게 그들을 분리?

Question

나는 학생 데이터베이스에 대한 struts2 응용 프로그램을 만들었습니다. 문제는 테이블에 데이터베이스를 표시 한 후 제출 단추를 추가 할 때마다 단추가 테이블의 행 너비와 비슷한 큰 배경으로 둘러싸여 있다는 것입니다. 그 경계를 제거하고 싶습니다. 여기

이 어떻게 보이는지 이미지입니다 :

참조, 홈 버튼 주위에 회색 배경이 어떻게, 나는 그것을 원하지 않는다. 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 파일 :

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 */ 
} 

여기

코드의 조각이다 별도의 div에있는 버튼. 또한 다른 테이블에 단추를 넣으려고했습니다. 그러나 아무것도 작동하지 않습니다. 내가 잘못 될 수있는 정확한 지점을 정확히 지적 할 수 없습니다. 배경 테두리가 사라지고 가운데 맞춤 단추를 만들려면 어떻게해야합니까?

Answer 1

s:form은 태그 구현에서 사용되는 freemarker 템플릿으로 구문 분석 된 추가 HTML 요소를 생성했습니다. 태그가 사용하는 테마를 기반으로 템플릿을 선택합니다.

Struts 태그에 의해 생성 된 요소를 포함하여 페이지의 모든 요소에 대해 CSS를 작성 했으므로 스타일이 상속됩니다.

모든 페이지 요소에 공통 선택기를 사용하면 항상 페이지에 요소의 디자인과 모양이 맞지는 않습니다. 반면 자격이있는 선택자 은 컨테이너 또는 다른 요소로 래핑 될 수있는 특정 내용으로 사용 범위를 좁 힙니다. 선택자를 id으로 한정하거나 테이블에 class 속성을 사용하고 클래스별로 선택기를 한정 할 수 있습니다.

Struts는 UI 태그로 생성 된 요소에 대해 몇 가지 테마를 사용합니다. 최소한의 영향을주는 Struts 태그를 사용하여 페이지를 맞춤 디자인하려는 경우 은 simple 테마를 사용해야합니다.

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