Question

    import java.sql.DriverManager;
    import java.sql.PreparedStatement;
    import java.sql.SQLException;
    import java.sql.Connection;
    public class getInfoDBemp {
   private static final String JDBC_URL = "jdbc:derby:EvCo-RegHuella;";
   Connection conn; 
   public getInfoDBemp () {     
   try {            
        this.conn = DriverManager.getConnection(JDBC_URL);
        if (this.conn != null) {                
            try {                   
                PreparedStatement ps = this.conn.prepareStatement(main.statementEmpreg);
                ps.execute();
                while (ps.getMoreResults()) {
                    String testprint = ps.getResultSet().toString();
                    System.out.println(testprint);
                                        }
                ps.close();                 
                    }catch(SQLException ex){
                    String exString = ex.toString();
                    System.out.println("ERROR " + exString);
                }
        }
    }catch (SQLException e) {
        System.out.print(e);
        }   
}
}

    public getInfoDBemp () {        
try {           
        this.conn = DriverManager.getConnection(JDBC_URL);
        if (this.conn != null) {                
            try {   
                Statement st = this.conn.createStatement();
                ResultSet rs = st.executeQuery(main.statementEmpreg);
                while (rs.next()){
                    int ID_r = rs.getInt("ID");
                    String Nombre_r = rs.getString("Nombre");
                    System.out.println(ID_r+" "+Nombre_r);                  
                    }
                st.close();

我想让表格全宽，直到屏幕可以并排包含多个表格，然后表格将并排显示但是当我在表CSS中写{display：inline-block}时，它就像this

然后是什么问题

Answer 1

您可以使用div和media query来实现这一目标。查看整页效果

.custom-table{width: 100%; border: 5px solid black;text-align: center; border-collapse: collapse;max-width: 300px;}
	.right-column{width: 20%; border: 3px solid lightblue;}
	.middle-column{width: 40%; border: 3px solid lightblue;}
	.left-column{width: 40%; border: 3px solid lightblue;}



.table1-box, .table2-box{
  width: 50%;
  float: left;
}

@media (max-width:800px){
 .table1-box, .table2-box{
   width: 100%;
   margin-bottom:30px;
 }

}

<div class="table1-box">
<table class="custom-table" dir="rtl">
	<tr class="custom-row">
		<td class="custom-column right-column">
			777
		</td>
		<td class="custom-column middle-column">
			888
		</td>
		<td class="custom-column left-column">
			999
		</td>
	</tr>
</table>
</div>

<div class="table2-box">

<table class="custom-table" dir="rtl">
	<tr class="custom-row">
		<td class="custom-column right-column">
			777
		</td>
		<td class="custom-column middle-column">
			888
		</td>
		<td class="custom-column left-column">
			999
		</td>
	</tr>
</table>
</div>

Answer 2

您需要使用“float：left”或“float：right”属性来允许表或任何其他容器（在我的情况下为div）浮动到另一个容器的一侧。结合“display：inline”或“display：inline-block”将为您提供您期望的结果。

您可以在此处查看：https://jsfiddle.net/7vxeakdw/3/

.custom-table{width: 100%; border: 5px solid black;text-align: center; border-collapse: collapse;max-width: 400px;display:inline;}
	.right-column{width: 20%; border: 3px solid lightblue;}
	.middle-column{width: 40%; border: 3px solid lightblue;}
	.left-column{width: 40%; border: 3px solid lightblue;}
  .container{display:inline-block;}
  .floatright{float:right;}

<div class="container">
   <table class="custom-table" dir="rtl">
      <tr class="custom-row">
         <td class="custom-column right-column">
            777
         </td>
         <td class="custom-column middle-column">
            888
         </td>
         <td class="custom-column left-column">
            999
         </td>
      </tr>
   </table>
</div>
<div class="container floatright">
   <table class="custom-table" dir="rtl">
      <tr class="custom-row">
         <td class="custom-column right-column">
            777
         </td>
         <td class="custom-column middle-column">
            888
         </td>
         <td class="custom-column left-column">
            999
         </td>
      </tr>
   </table>
</div>

CSS表格显示：内联块

2 个答案: