Question

我有一个将使用jquery动态加载的表。我给对齐参数作为中心。但它对齐了左边。请帮帮我

＆＃13;

   <title></title>
<style>
.tb1 { background-color : #EEE8AA; color: black; font-size: 13pt; onfocus="this.value=" font:verdana}
.inp { border: 0; color: black; font-size: 13pt; onfocus="this.value=" font:verdana }
/* button styles */
.button0 { background-color: Orange  ; border: 110;  color: black; text-align: center; text-decoration: none; display: inline-block; border-color: #ff0000; }
.button1 { background-color: Orange  ; border: 110;  color: black; text-align: center; text-decoration: none; margin: 0 auto; display: block;  border-color: black;}
.button2 { background-color: Orange  ; border: 110;  color: black; text-align: center; text-decoration: none; margin: 0 auto; display: block;  border-color: black;}
/* web page layout styles */
html, body { margin: 0;}
div { height: 30%; background-color: white; float: left;}
#left { width:33%; margin-top:20px }
#center { width:33%; margin-top:20px }
#right { width:33%; margin-top:20px }
/* table-itemtable styles */
table { border-collapse: collapse;}
th, td { text-align: center; padding: 8px;}
th {background-color: #4CAF50; color: white;}
tr {border-bottom: 1px solid;}
tbody { display: block; }
tbody {
    height: 300px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}
</style>
</head>
<body>
<div id="left">
GRn:    <input type="text" id="grn" class="tb1" placeholder="Provide your input" onkeypress="return isNumber(event)" autofocus="autofocus" /><br><br>
Unit:   <input type="text" list="combo-options" id="unit" class="tb1">
		<datalist id="combo-options">
	    <option value="UNIT 1">UNIT 1</option>
  		<option value="UNIT 2">UNIT 2</option>
		</datalist><br><br>
<input type="button" id="find" value="Find" class="button0"/><br><br>
</div>
<div id="center">
PO no:     <input type="text" id="pono" readonly="readonly" class="inp"/><br><br>
PO Date:   <input type="text" id="podt"   readonly="readonly" class="inp"/><br><br>
V.Inv.No    <input type="text" name="vinvno" readonly="readonly" id="vinvno" class="inp"/><br><br>
V.Inv.Date  <input type="text" name="vinvdt" readonly="readonly" id="vinvdt" class="inp"/><br><br>
</div>
<div id="right">
IRno:  <input type="text" name="irepno" id="irepno" class="inp" /><br><br>
Creation Date <input type="date" name="cdate" id="cdate" class="inp" value="<%= new SimpleDateFormat("dd-MM-yyyy").format(new java.util.Date())%>"><br><br>
Type<select name="evalu" id="evalu">
	<option value="electrical">Electrical</option>
	<option value="mechanical">Mechanical</option>
</select>
</div>
<div id="tablediv">
<table cellspacing="0" id="itemtable" align="center"> 
    <tr>
    	<th> SLno</th>
        <th>Item name</th> 
        <th>Item code</th>
        <th>Supplier</th>  
        <th>Received qty</th>   
        <th>Accepted qty</th>   
        <th>Rejected qty</th>      
        <th>Remarks</th>             
    </tr> 
</table>
</div>
<div id="inspdiv">

</div>
</body>
</html>
</html>

＆＃13;

Answer 1

这是由于表中的width:100%;。因此它可以正常工作。

<强> JSFIDDLE

＆＃13;

/* table-itemtable styles */
table { border-collapse: collapse;}
th, td { text-align: center; padding: 8px;}
th {background-color: #4CAF50; color: white;}
tr {border-bottom: 1px solid;}
tbody { display: block; }
tbody {
    height: 500px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

＆＃13;

<div id="tablediv">
<table cellspacing="0" id="itemtable" align="center"> 
    <tr>
    	<th> SLno</th>
        <th>Item name</th> 
        <th>Item code</th>
        <th>Supplier</th>  
        <th>Received qty</th>   
        <th>Accepted qty</th>   
        <th>Rejected qty</th>      
        <th>Remarks</th>             
    </tr> 
</table>
</div>

＆＃13;

编辑：

从CSS中的float:left移除div。这会导致问题。请勿使用display:inline-block

Answer 2

＆＃13;

/* table-itemtable styles */
table { border-collapse: collapse;}
th, td { text-align: left; padding: 8px;}
th {background-color: #4CAF50; color: white;}
tr {border-bottom: 1px solid;}
tbody { display: block; }
tbody {
    height: 500px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

＆＃13;

<div id="tablediv">
<table cellspacing="0" id="itemtable" align="center"> 
    <tr>
    	<th> SLno</th>
        <th>Item name</th> 
        <th>Item code</th>
        <th>Supplier</th>  
        <th>Received qty</th>   
        <th>Accepted qty</th>   
        <th>Rejected qty</th>      
        <th>Remarks</th>             
    </tr> 
</table>
</div>

＆＃13;

删除宽度：100％;从表格开始，它将与中心对齐。

Answer 3

只需添加text-align：center; CSS中的th和td。

＆＃13;

/* table-itemtable styles */
table { border-collapse: collapse; width: 100%;}
th, td { text-align: left; padding: 8px; text-align:center;}
th {background-color: #4CAF50; color: white;}
tr {border-bottom: 1px solid;}
tbody { display: block; }
tbody {
    height: 500px;       /* Just for the demo          */
    overflow-y: auto;    /* Trigger vertical scroll    */
    overflow-x: hidden;  /* Hide the horizontal scroll */
}

＆＃13;

<div id="tablediv">
<table cellspacing="0" id="itemtable"> 
    <tr>
    	<th> SLno</th>
        <th>Item name</th> 
        <th>Item code</th>
        <th>Supplier</th>  
        <th>Received qty</th>   
        <th>Accepted qty</th>   
        <th>Rejected qty</th>      
        <th>Remarks</th>             
    </tr> 
</table>
</div>

＆＃13;

无法使用align参数将表格置于中心

3 个答案: