Hello I have table with more columns:
.server-name {
max-width: 200px;
word-wrap: break-word;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<table class="table serverlist">
<thead>
<tr>
<th scope="col" class="rank">Ранг</th>
<th scope="col" class="server-name">Имя</th>
<th scope="col" class="version">Версия</th>
<th scope="col" class="server-info">Сервер</th>
<th scope="col" class="status">Игроков</th>
<th scope="col" class="online">Статус</th>
<th scope="col" class="rating">Рейтинг</th>
</tr></thead>
<tbody>
<tr>
<td class="rank">
<span>1</span>
</td>
<td class="server-name">
Luminex - Semi-RPG Survival</td>
<td class="version">
1.12.1
</td>
<td class="server-info">
<div class="img-banner">
<img src="http://minecraftrating.ru/uploads/servers/29700/29700.gif?8185" alt="">
</div>
<div class="server-ip clearfix"><p><i class="ion-ios-world"></i>
<span>play.minesuperior.com</span></p>
<a href="#!" onclick="copyToClipboard('play.minesuperior.com', $(this))" class="copy-action"><span class="copy-text"><i class="ion-scissors"></i>
Копировать
</span>
</a>
</div>
</td>
<td class="status">18/27</td>
<td class="online"><span class="badge badge-success">Online</span></td>
<td class="rating"><span class="balls">225 <i class="balls fa fa-star"></i></span> <span class="votes">335 <i class="votes fa fa-thumbs-up"></i></span></td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
I need do break word on column server, where name = 40 symbols. Width and break-word not working and my column resize. Why? Width: 157px not working...
If do: display: block on server-name, then name up to column.
UPDATE
Luminex - Semi-RPG Survival not resize in all width..
You need give width to the inner element of td.
.server-name a {
width: 157px;
word-wrap: break-word;
display:block;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<table class="table serverlist">
<thead>
<tr>
<th scope="col" class="rank">Ранг</th>
<th scope="col" class="server-name">Имя</th>
<th scope="col" class="version">Версия</th>
<th scope="col" class="server-info">Сервер</th>
<th scope="col" class="status">Игроков</th>
<th scope="col" class="online">Статус</th>
<th scope="col" class="rating">Рейтинг</th>
</tr></thead>
<tbody>
<tr>
<td class="rank">
<span>1</span>
</td>
<td class="server-name">
Luminex - Semi-RPG Survival</td>
<td class="version">
1.12.1
</td>
<td class="server-info">
<div class="img-banner">
<img src="http://minecraftrating.ru/uploads/servers/29700/29700.gif?8185" alt="">
</div>
<div class="server-ip clearfix"><p><i class="ion-ios-world"></i>
<span>play.minesuperior.com</span></p>
<a href="#!" onclick="copyToClipboard('play.minesuperior.com', $(this))" class="copy-action"><span class="copy-text"><i class="ion-scissors"></i>
Копировать
</span>
</a>
</div>
</td>
<td class="status">18/27</td>
<td class="online"><span class="badge badge-success">Online</span></td>
<td class="rating"><span class="balls">225 <i class="balls fa fa-star"></i></span> <span class="votes">335 <i class="votes fa fa-thumbs-up"></i></span></td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
</body>
</html>
Related
I'm trying to vertically align the column header the carets, but as you can see they are currently misaligned.
What I have so far (this is using bootstrap)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Test</title>
<link rel="stylesheet" href="css/all.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div>
<table class="table table-dark table-striped table-hover table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">
Title
<div style="float: right; display: inline;">
<div style="height: 16px">
<i class="fas fa-caret-up" style="height: fit-content; vertical-align: bottom; font-size: 20px;"></i>
</div>
<div style="height: 16px;">
<i class="fas fa-caret-down" style="height: fit-content; vertical-align: top; font-size: 20px;"></i>
</div>
</div>
</th>
<th scope="col">Foo</th>
<th scope="col">Bar</th>
<th scope="col">Quax</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
It produces this on my chrome:
The "Title" is too high and the carets are too low. How would I align them vertically in the middle of the header.
th {
vertical-align: top;
position: relative;
}
th .fas {
position: absolute;
right: 8px;
line-height: 24px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="container">
<div>
<table class="table table-dark table-striped table-hover table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">
Title
<i class="fas fa-sort"></i>
</th>
<th scope="col">Foo</th>
<th scope="col">Bar</th>
<th scope="col">Quax</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
You can try :
th {
vertical-align: bottom;
text-align:center;
}
it should align your theads to the bottom center
I have created a table which include a "+" font awesome icon.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<table class="table table-bordered w-auto">
<thead>
<tr>
<th>Column_1</th>
<th>Column_2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form-group" style="position: relative">
<input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name">
<div class="justify-content-center" style="position: absolute; width: 100%; left: 50%;">
<a class="fa fa-plus-circle" href="#"></a>
</div>
</td>
</tr>
</tbody>
</table>
Now how to add a new row by clicking on the "+" icon?
You can't add another row without using javascript or Jquery. here is a solution:-
function addrow(){
var row = "<tr><td class='form-group' style='position: relative'><input type='Column_1' class='form-control' id='clmn1' placeholder='Enter the name'><div class='justify-content-center' style='position: absolute; width: 100%; left: 50%;'></div></td></tr>";
document.getElementById("myList").insertAdjacentHTML('beforeend', row);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
</head>
<body>
<table class="table table-bordered w-auto">
<thead>
<tr>
<th>Column_1</th>
<th>Column_2</th>
</tr>
</thead>
<tbody id="myList">
<tr >
<td class="form-group" style="position: relative">
<input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name">
</td>
</tr>
</tbody>
<tfoot> <tr><td><a onclick="addrow()" class="fa fa-plus-circle" href="#"></a></tfoot></td></tr>
</table>
</body>
</html>
I have a simple Bootstrap 4 table with 2 columns - I would like to be able to align some of the text in the top right column to the right, whilst leaving the remaining text in that cell left aligned.
Here's my table:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<div class="text-right">On Special</div>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
I'm trying to get the On Special string to be aligned to the right and on the same line as the SKU value - I've tried playing with and and but can't seem to get this to work. I'm not sure if this is even possible or if there's another way to tackle this problem?
It's quite simple; you just need to replace,
<div class="text-right">On Special</div>
with
<div class="float-right">On Special</div>
Find the complete working code below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<span class="float-right">On Special</span>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<span style="float: right;">On Special</span>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
.text {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<div class="text">On Special</div>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
Just change you this code :
<div class="text-right">On Special</div>
To this code :
<div style="float:right;">On Special</div>
You could start with something like this.
.text-right {
display: inline;
position: absolute;
right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<div class="text-right">On Special</div>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<span class="float-right">On Special</span>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
I have a weird problem. The color won't show in a table:
What am I doing wrong?
The "danger" class should as far as I know work here.
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Hardware (navn)</th>
<th>Map</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td class="danger col-md-1">
33
</td>
<td class="danger col-md-2">
Something
</td>
<td class="danger col-md-1">
Something else
</td>
<td class="danger col-md-2">
DATE
</td>
<td class="danger">
Description.........
</td>
</tr></tbody></table>
For text coloring use text-danger, for background coloring use bg-danger.
As far as I know, there is no danger class in Bootstrap.
As explained by the bootstrap color documentation.
The class: bg-danger - Changes background color to red.
The class: text-danger - Changes the font color to red.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Hardware (navn)</th>
<th>Map</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td class="bg-danger col-md-1">
33
</td>
<td class="text-danger col-md-2">
Something
</td>
<td class="danger col-md-1">
Something else
</td>
<td class="danger col-md-2">
DATE
</td>
<td class="danger">
Description.........
</td>
</tr>
</tbody>
</table>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
You use the wrong class try this :
<td class="bg-danger col-md-1">
33
</td>
if you use bootstrap 4 , the correct class is table-danger see this
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<table class="table table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Hardware (navn)</th>
<th>Map</th>
</tr>
</thead>
<tbody>
<tr class="table-danger">
<td class="col-md-1">
33
</td>
<td class="col-md-2">
Something
</td>
<td class="col-md-1">
Something else
</td>
<td class="col-md-2">
DATE
</td>
<td class="">
Description.........
</td>
</tr>
<tr class="">
<td class="col-md-1">
33
</td>
<td class="table-danger col-md-2">
Something
</td>
<td class="col-md-1">
Something else
</td>
<td class="col-md-2">
DATE
</td>
<td class="table-danger">
Description.........
</td>
</tr>
</tbody></table>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
This should be simple. I just want to display the font-awesome remove font, and the font awesome fa-camera-retro font. What on earth am I doing wrong. I made sure I am using the right class; I examined the website and just simply downloaded the CDN.
Copy this file to your hard drive and call it Index.html;
Examine this through ANY browser; It will not work. Somehow it works on Fiddle! WTF?
<!DOCTYPE html>
<html lang="en">
<head>
<title> Test </title>
<meta charset="utf-8">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script> </script>
</head>
<body>
WHY DOESNT THIS WORK = Remove It - <i class="fa fa-remove"></i>
<div class="container">
<div class="row">
<div class="col-md-6">
<table class="table table-hover">
<thead>
<tr>
<th> Heading 1 </th>
<th> Heading 2 </th>
<th> Remove </th>
<th> Icon 2 </th>
</tr>
</thead>
<tbody>
<tr>
<td> Element 1 </td>
<td> Element 2 </td>
<td>WHY DOESNT THIS WORK = <i class="fa fa-camera-retro"></i></td>
<td><i class="fa fa-times"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Add https: (6th line)
<!DOCTYPE html>
<html lang="en">
<head>
<title> Test </title>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script> </script>
</head>
<body>
WHY DOESNT THIS WORK = Remove It - <i class="fa fa-remove"></i>
<div class="container">
<div class="row">
<div class="col-md-6">
<table class="table table-hover">
<thead>
<tr>
<th> Heading 1 </th>
<th> Heading 2 </th>
<th> Remove </th>
<th> Icon 2 </th>
</tr>
</thead>
<tbody>
<tr>
<td> Element 1 </td>
<td> Element 2 </td>
<td>WHY DOESNT THIS WORK = <i class="fa fa-camera-retro"></i></td>
<td><i class="fa fa-times"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>