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>
Related
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>
I am using default bootstrap tooltip in my table header. It shows irrelevant behavior, like- it increases the width of the header.
here is the codepen link
https://codepen.io/tumulalmamun/pen/mpQzBV
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<p>The data-placement attribute specifies the tooltip position.</p>
<div class="row">
<div class="col-lg-3">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr><th colspan="2"> status (Overall)</th></tr>
<tr>
<th colspan="2" data-toggle="tooltip" data-placement="right" title="Hooray!">
Pending
</th>
</tr>
<tr>
<th data-toggle="tooltip" data-placement="right" title="Hooray!">M</th>
<th data-toggle="tooltip" data-placement="right" title="Hooray!">O</th>
</tr>
</thead>
</table>
</div>
<div class="col-lg-3"></div>
<div class="col-lg-3"></div>
</div>
</div>
</body>
</html>
The fix is to add the tool-tip to an element inside of th/td instead of directly on it. (I have added divs around the text you see in your example)
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th colspan="5">Pre-Recruitment status (Overall)</th>
</tr>
<tr>
<th rowspan="2" colspan="2">Status </th>
<th rowspan="2">Candidate</th>
<th colspan="2">
<div data-toggle="tooltip" data-placement="right" title="Hooray!">Panding Doc.</div>
</th>
</tr>
<tr>
<th>
<div data-toggle="tooltip" data-placement="right" title="Hooray!">M</div>
</th>
<th>
<div data-toggle="tooltip" data-placement="right" title="Hooray!">O</div>
</th>
</tr>
</thead>
</table>
When a tool-tip is displayed it adds a new div to the markup directly after the element with the data-toggle="tooltip" attribute on it (Inspect using dev tools to see this happening). Therefore it will break your table layout because a tool-tip will be placed after the table element. If it is done inside a table element the layout will not be affected.
I have forked your codepen with the solution.
Can someone explains how is that possible that an inputof type "submit" is placed at the top-left although it's inside the third <tr>
I can change its position to the right place through margin and position properties, but there should be no need for them at all in this case.
see the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
</body>
</html>
Insert td like this:
<td> <---------------
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td> <--------------
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<td>
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td>
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
you forgot to add td in your tr section, and because your third tr has only one td, you must set colspan to 3 as it's property...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<td colspan="3">
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td>
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
</body>
</html>
I have included my plunker link here https://plnkr.co/edit/TD6iQJvIExwTeJ9QPbRS?p=preview
I want the submit button to appear at the right bottom of the table.My table width changes according to the data. My table's width is auto. So how will i position the button to right bottom everytime.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table" style="width:auto;">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
<div class="col-sm-1">
<button class="btn btn-success pull-right">SUBMIT</button>
</div>
</div>
</body>
</html>
You can try this code.
When trying remove last tr from tbody and check the width and button position.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and only horizontal dividers) to a table:</p>
<table class="table" style="width:auto;">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July jan</td>
<td>Dooley Hello</td>
<td>julyjan12345678#example.com</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right"><button class="btn btn-success pull-right">SUBMIT</button></td>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
Change the Grid class to col-sm-12 and make the width of the table to 100%.
Added the Preview,
https://plnkr.co/edit/M3p2bpj460niGCu59irR?p=preview
I am using bootstrap3 for my table.
I need Login button in to be last column of the table.
I really need it to be in bootstrap only.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
</tr>
<tr>
<td rowspan='3'><button class="btn btn-primary">Login</button></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I tried but couldn't solve it.
Please help me.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
.table > tbody > tr > td {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
<td rowspan='3'><button class="btn btn-primary align-middle">Login</button></td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
Might be you want this. If it is not, please elaborate where you exactly want the button.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
<td><button class="btn btn-primary">Login</button> </td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
<td><td>
</tr>
</tbody>
</table>
</div>
try this code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table">
<tbody>
<tr>
<td rowspan='3'>123</td>
<td rowspan='3'>C</td>
<td rowspan='3'>11-07-1996</td>
<td rowspan='3'>Male</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2015</td>
<td>21-09-2015</td>
</tr>
<tr>
<td>PCMB (Engg and Medical) 2016</td>
<td>21-09-2016</td>
</tr>
<tr>
<td></td><td></td><td></td><td></td><td></td><td><button class="btn btn-primary">Login</button></td>
</tr>
</tbody>
</table>
</div>