我无法为以下代码设置广告尺寸 我无法为以下代码设置广告大小 我无法为以下代码设置广告大小 我无法为以下代码设置广告大小我无法为以下代码设置广告大小我无法为以下代码设置广告大小我无法为以下代码设置广告大小 我无法为以下代码设置广告大小 我无法为以下代码设置广告大小 我无法为以下代码设置广告大小我无法为以下代码设置广告大小我无法为以下代码设置广告大小 我尝试设置动态宽度计算。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<title>Home Page</title>
<style>
input[type=text], select, textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
resize: vertical;
}
label {
padding: 12px 12px 12px 0;
display: inline-block;
}
input[type=submit] {
background-color: #4CAF50;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
float: right;
}
input[type=submit]:hover {
background-color: #45a049;
}
.container {
border-radius: 1px;
background-color: #f2f2f2;
padding: 30px;
width:100%;
}
.col-25 {
float: left;
width: 25%;
margin-top: 1px;
}
.col-75 {
float:left;
width: 30%;
margin-top: 1px;
text-align:center;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
.Midalign{
text-align:center;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tbody {
display:block;
height:100px;
overflow-x:auto;
}
thead, tbody tr {
display:table;
width:100%;
table-layout:fixed;
}
thead {
width: 100%
}
tr:nth-child(even) {
background-color: #dddddd;
}
.baseWidth {
width:calc( 100% - 1em );
}
</style>
<script>
function onBtn1Click(){
alert("Nouveau");
};
function onBtn2Click(){
alert("Aiouter");
};
function onBtn3Click(){
alert("Modifier");
};
function onBtn4Click(){
alert("Supprimer");
};
function onBtn5Click(){
alert("Nouveau 1");
};
function onBtn6Click(){
alert("Aiouter 2");
};
function onBtn7Click(){
alert("Modifier 2");
};
function onBtn8Click(){
alert("Supprimer 2");
};
function onBtn9Click(){
alert("Type de fonds");
};
function onBtn10Click(){
alert("Titre Impression");
};
function onBtn11Click(){
confirm("Are you sure?");
};
function validateCheckbox1(){
var checkbox1 = document.getElementById('validateCheckbox1');
if (checkbox1.checked) {
alert("checkbox1 selected");
} else {
alert("checkbox1 un-selected");
}
};
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-25">
<h3><label for="fname">Heading 1</label></h3>
</div>
</div>
<div class="row" >
<table>
<thead class="baseWidth">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
<th>Country 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
<td>UK</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
<td>UK</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
<td>USA</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
<td>Germany</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
<td>Germany</td>
</tr>
</tbody>
</table>
</div>
<br><br>
<div class="row Midalign">
<div class="col-25">
<textarea rows="1" cols="5" width="50%">
</textarea>
</div>
<div class="col-75">
<input type="checkbox" name="chkbox1"> <input type="checkbox" name="chkbox2"> <input type="date" name="date1">
</div>
<div class="col-25">
<select name="drpdwn1">
<option value="select">select</option>
<option value="optn1">optn1</option>
<option value="optn2">optn2</option>
<option value="optn3">optn3</option>
</select>
</textarea>
</div>
</div>
<br><br>
<div class="row Midalign">
<div class="col-75">
<input type="button" name="Button 1" value="Button 1" class="btn" onclick="onBtn1Click()"></input>
<input type="button" name="Button 2" value="Button 2" class="btn" onclick="onBtn2Click()"></input>
</div>
<div class="col-75">
<input type="button" name="Button 3" value="Button 3" class="btn" onclick="onBtn3Click()"></input>
<input type="button" name="Button 4" value="Button 4" class="btn" onclick="onBtn4Click()"></input>
</div>
</div>
<!-- part 2-->
<div class="row">
<div class="col-25">
<h3><label for="head2">Heading 2</label></h3>
</div>
</div>
<div class="row">
<table>
<thead class="baseWidth">
<tr>
<th>Company</th>
<th>Contact</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
</tr>
</tbody>
</table>
</div>
<br><br>
<div class="row">
<div class="col-25">
<textarea rows="1" cols="5" width="50%">
</textarea>
</div>
<div class="col-75">
<input type="button" value="?"/> <input type="checkbox" id="validateCheckbox1" onclick="validateCheckbox1()"> <input type="date" name="date1">
</div>
</div>
<br><br>
<div class="row">
<div class="col-75">
<input type="button" name="Button 1" value="Button 1" class="btn" onclick="onBtn5Click()"></input>
<input type="button" name="Button 2" value="Button 2" class="btn" onclick="onBtn6Click()"></input>
<input type="button" name="Button 2" value="Button 3" class="btn" onclick="onBtn7Click()"></input>
</div>
<div class="col-75">
<input type="button" name="Button 3" value="Button 4" class="btn" onclick="onBtn8Click()"></input>
<input type="button" name="Button 4" value="Button 5" class="btn" onclick="onBtn9Click()"></input>
<input type="button" name="Button 5" value="Button 6" class="btn" onclick="onBtn10Click()"></input>
</div>
</div>
<br/><br/><br/>
<div class="row Midalign">
<input type="button" name="Button 7" value="Firmer" class="btn" onclick="onBtn11Click()"></input>
</div>
</div>
</body>
</html>
不适用