السلام عليكم و رحمة الله وبركاته لدي مشكلة في الزرين زر view و delet
اود ان اجعلهما بجانب بعض لا تحت بعضهما البعض كيف اقوم بذلك
و شكرا.......
كود html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/Examples/cssPage.css">
<title>Examples</title>
</head>
<body>
<h1>this is my site</h1>
<table>
<thead>
<tr>
<td>Avatar</td>
<td>Groub</td>
<td>Name</td>
<td>Points</td>
<td>Control</td>
</tr>
</thead>
<tbody>
<!-- 1 -->
<tr class="one">
<td><img src="../Html Required/python.png" alt=""></td>
<td>Python Programmer</td>
<td>Osama Issa</td>
<td>120</td>
<td class="control">
<button> View </button>
<button class="two"> Delet </button>
</td>
</tr>
<!-- 2 -->
<tr class="one">
<td><img src="../Html Required/js.png" alt=""></td>
<td rowspan="2">Java Script and Python Programmers</td>
<td>Hamed mahmoud</td>
<td>180</td>
<td class="control">
<button>View</button>
<button class="two">Delet</button>
</td>
</tr>
<!-- 3 -->
<tr class="one">
<td><img src="../Html Required/python.png" alt=""></td>
<td>Khaled abd alrhman</td>
<td>130</td>
<td class="control">
<button>View</button>
<button class="two">Delet</button>
</td>
</tr>
<!-- 4 -->
<tr class="one">
<td><img src="../Html Required/js.png "></td>
<td>Java Script Programmer</td>
<td>kmal rmadan</td>
<td>140</td>
<td class="control">
<button>View</button>
<button class="two">Delet</button>
</td>
</tr>
<!-- 5 -->
<tr class="one">
<td><img src="../Html Required/js.png" alt=""></td>
<td>Java Script Programmer</td>
<td>Adel Youef</td>
<td rowspan="2">190</td>
<td>
<button>View</button>
<button class="two">Delet</button>
</td>
</tr>
<!-- 6 -->
<tr class="one">
<td><img src="../Html Required/js.png" alt=""></td>
<td>Python Programmer</td>
<td>Amr mohammed</td>
<td >
<button>View</button>
<button class="two">Delet</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
كود css
body{
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif ;
}
h1{
font-size: 80px ;
text-align: center ;
}
table{
height: 400px ;
width: 700px ;
margin: 20px auto ;
/* background-color: rgb(243, 243, 243); */
/* border: solid rgb(197, 197, 197) 3px ; */
text-align: center ;
font-size: 20px ;
}
thead{
background-color: rgb(92, 92, 92) ;
border-color: red ;
font-weight : bold ;
color: rgb(255, 255, 255);
}
.one{
background-color: rgb(223, 223, 223);
}
td{
padding: 17px ;
margin : 8px ;
/* border: 0.5px solid rgb(214, 214, 214); */
}
button{
background-color: rgb(255, 41, 148);
border: none;
color: white;
padding: 1px;
margin: -1px;
width: 34px;
border-radius: 3px ;
cursor: cell;
}
.two{
background-color: rgb(48, 145, 255) ;
}