无法使用对齐参数

将表放置在中心我有一个表将使用jquery动态加载。我将参数对齐为中心。但它左对齐。请帮我无法使用对齐参数

<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"> 
 
\t \t <datalist id="combo-options"> 
 
\t  <option value="UNIT 1">UNIT 1</option> 
 
    \t \t <option value="UNIT 2">UNIT 2</option> 
 
\t \t </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"> 
 
\t <option value="electrical">Electrical</option> 
 
\t <option value="mechanical">Mechanical</option> 
 
</select> 
 
</div> 
 
<div id="tablediv"> 
 
<table cellspacing="0" id="itemtable" align="center"> 
 
    <tr> 
 
    \t <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>

来源

2017-03-17 kavi

的[对齐在一个表中的标题文本]（http://stackoverflow.com/questions/13992096/align-text-in-a-table-header） –

这是由于table.Remove width:100%;，它工作得很好。

JSFIDDLE

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

<div id="tablediv"> 
 
<table cellspacing="0" id="itemtable" align="center"> 
 
    <tr> 
 
    \t <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>

编辑：

删除从CSS.That divfloat:left导致problem.Instead使用display:inline-block

来源

2017-03-17 07:08:39

可能的复制@ shubam：不工作！ – kavi

它的工作我会附上一个小提琴。检查 –

@ kavi做的代码工作 –

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

<div id="tablediv"> 
 
<table cellspacing="0" id="itemtable" align="center"> 
 
    <tr> 
 
    \t <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>

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

来源

2017-03-17 07:08:46 athi

无法正常工作。我添加了其他我的CSS。是因为任何其他格式？ – kavi

只需添加文本对齐：中心;到CSS中的th和td。

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

<div id="tablediv"> 
 
<table cellspacing="0" id="itemtable"> 
 
    <tr> 
 
    \t <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>

来源

2017-03-17 07:12:13

无法使用对齐参数

回答

相关问题